Dynamically created bootstrap columns with different heights floating to the left

Question

Consider the unknown number of dynamically created divs created using the bootstrap system. In this example, I use col-sm-4 , so after every third block we go to a new line. Blocks (divs) can be of different heights, which are determined by the contents inside.

Here I am facing a layout problem. When moving to a new line, I want the fourth block to float to the left. This only happens when the very last div in the line above is also the shortest. I have illustrations to illustrate.

Real life:

Dream:

The “right” way to do this is to wrap every three in the row class, which I believe, but I'm not sure how to do this with dynamic content (maybe hack it), or if there is a css solution.

HTML:

 <div class="row"> <div class="col-sm-12"> <div class="col-sm-4 block"> <div class="inner-block"></div> </div> <div class="col-sm-4 block"> <div class="inner-block"></div> </div> <div class="col-sm-4 block"> <div class="inner-block" style="height:150px"></div> </div> <div class="col-sm-4 block"> <div class="inner-block"></div> </div> </div> </div> 

CSS

 .block { padding: 5px; } .inner-block { height: 200px; background-color: blue; } 

Plunger example (expand the preview to the desired size)

Answer 1

If your system cannot add the first / last classes to every nth div, you can use the nth-child css pseudo-selector.

 @media (min-width: 768px) {// For medium displays and above .col-sm-4:nth-child(3n+1) { // We target every 3rd div but offset the count by 1 so that that 1st, 4th 7th etc divs are cleared clear:both; // Clear the float } }