title: Bootstrap float divs left to right
body: <p>For my project i am using bootstrap.</p>
  
  <p>I am trying to show divs that float from left to right so i made</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;11111111&lt;br&gt;&lt;/div&gt;
    &lt;div class="col-md-4"&gt;2222222222&lt;br&gt;222222222222&lt;br&gt;&lt;/div&gt;
    &lt;div class="col-md-4"&gt;333333333333&lt;br&gt;&lt;/div&gt;
    &lt;div class="col-md-4"&gt;444444444444&lt;br&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://www.bootply.com/yyKS8cgS4h" rel="nofollow noreferrer">http://www.bootply.com/yyKS8cgS4h</a></p>
  
  <p>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 ?</p>
  
  <p>Edit</p>
  
  <p>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</p>
  
  <p>To understand my problem better i made another example.</p>
  
  <p><a href="http://www.bootply.com/R3MXHJL9wM" rel="nofollow noreferrer">http://www.bootply.com/R3MXHJL9wM</a></p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/Tn5if.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tn5if.png" alt="enter image description here"></a></p>
  
  <p>An example, the images divs are under each other with no gaps under them (which you get if you just make a new row)</p>