Bootstrap float divs left to right

Question

For my project i am using bootstrap.

I am trying to show divs that float from left to right so i made

<div class="row">
  <div class="col-md-4">11111111<br></div>
  <div class="col-md-4">2222222222<br>222222222222<br></div>
  <div class="col-md-4">333333333333<br></div>
  <div class="col-md-4">444444444444<br></div>
</div>

http://www.bootply.com/yyKS8cgS4h

But as you see the div with the 4s is not added under the div with the 1s but under the div with the 3s. How can i fix it so that it will be added under the divs with the 1s ?

Edit

The numbers of divs is dynamic so i cant just add it to div 11111, what i want is something like on the pinterest.com homepage where all the divs are added from left to right and there are nog big spaces under every div

To understand my problem better i made another example.

http://www.bootply.com/R3MXHJL9wM

This is what i want to do, fill the page with images with a discription under it. But i want the page to be filled without the huge gaps like the ones you see in the example.

An example, the images divs are under each other with no gaps under them (which you get if you just make a new row)

Answer 1

You should read the grid section from Twitter Bootstrap:

Grid columns are created by specifying the number of twelve available columns you wish to span. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

So, after every 12 columns, you should start a new line with a new <div class="row">.

Take a look to this official example.

So, if you want to add the 4s under the div with the 1s, your snippet should be:

<div class="row">
  <div class="col-md-4">11111111<br></div>
  <div class="col-md-4">2222222222<br>222222222222<br></div>
  <div class="col-md-4">333333333333<br></div>
</div>

<div class="row>
  <div class="col-md-4">444444444444<br></div>
</div>

http://www.bootply.com/HbFGma5nI0

In your second snippet, you should extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

<div class="col-md-4">
   <div class="thumbnail">
      <img src="http://placehold.it/350X350" class="img-responsive">
      <div class="caption">
         <p>11111111111111111</p>
      </div>
   </div>
</div>

http://www.bootply.com/QKZBKM3NmO

Answer 2

For anyone with the same problem i suggest using column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.