Bootstrap row with columns of different heights

Question

I currently have something like:

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

Now, assuming that the content were boxes of different heights with the same width - how can I keep the same “grid layout”, and yet all the rectangles line up with each other, and not in perfect lines.

Currently, TWBS will place the next col-md-4 under the longest element in the previous third line. Thus, each line of elements is perfectly aligned - while this is amazing, I want each element to fall directly under the last element

Answer 1

This is a popular Bootstrap question, so I updated and expanded the answer.

Bootstrap 3 " height issue " occurs because columns use float:left . When a column “floats”, it is inferred from the normal flow of the document. He moves left or right until he touches the edge of his box. So, when you have an uneven column height , the correct behavior is to stack them in the closest direction.

Note The options below apply to scenarios with a column where there are more than 12 units in one .row . For readers who do not understand why there were no more than 12 columns in a row , or think that the solution is to “use separate rows” should read this first

---

There are several ways to fix this. (updated for 2018)

1 - the 'clearfix' approach ( recommended by Bootstrap ), like this (iterates every X columns), This will force each X to wrap the number of columns ...

 <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="clearfix"></div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="clearfix"></div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> 

Clearfix Demo (one level)

Clearfix Demo (reactive levels) - for example. col-sm-6 col-md-4 col-lg-3

There is also a CSS only change in 'clearfix'
CSS-only cleanup with tables

---

2 - make columns of the same height (using flexbox):

Since the problem is caused by the difference in height, you can make the columns equal height on each row. Flexbox is the best way to do this and is supported in Bootstrap 4 ...

 .row.display-flex { display: flex; flex-wrap: wrap; } .row.display-flex > [class*='col-'] { display: flex; flex-direction: column; } 

Flexbox Equal Height Demo

---

3 - Un-float columns use an inline block instead.

Again, the height problem only occurs because the columns are moving. Another option is to set the columns to display:inline-block and float:none . It also provides greater flexibility for vertical alignment. However, with this solution there should be no HTML spaces between the columns , otherwise the elements of the inline block have extra space and will be completed prematurely.

Demo version of the built-in block

---

4 - CSS3 column approach (Freemasonry / Pinterest solution) ..

This is not native to Bootstrap 3, but there is another approach using CSS columns . One drawback of this approach is the order of the columns from top to bottom, and not from left to right. Bootstrap 4 includes this type of solution: Bootstrap 4 Demographic maps to demonstrate the pantry .

Bootstrap 3 multi-column demo

5 - Freemasonry JavaScript / jQuery approach

Finally, you can use a plugin like Isotope / Masonry:

Bootstrap breadboard demo
Freemasonry 2

---

Learn more about variable column heights.

---

Update 2018
All columns are equal in height in Bootstrap 4 because Flexbox is used by default, so the height issue is not an issue. In addition, Bootstrap 4 includes such a solution with several columns: Bootstrap 4 Demographic maps to demonstrate the pantry .

Answer 2

For some reason this worked for me without the .display-flex class

 .row { display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; } 

Answer 3

The col amount inside the loading tray should be every time 12. This will support a clean grid design:

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