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.

[![enter image description here](https://i.stack.imgur.com/Tn5if.png)](https://i.stack.imgur.com/Tn5if.png)

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