By user3379926


2014-03-10 20:43:50 8 Comments

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, content was boxes of different height, with all the same width - how could I keep the same "grid based layout" and yet have all the boxes line up under each other, instead of in perfect lines.

Currently TWBS will place the next line of col-md-4 under the longest element in the previous third row., thus each row of items is perfectly aligned an clean - while this is awesome I want each item to fall directly under the last element ("Masonry" layout)

3 comments

@Akash Yellappa 2018-11-20 15:30:41

I created another extension (which also is reactive) to the bootstrap row. You can try something like this:

.row.flexRow { display: flex; flex-wrap: wrap;}

@Zim 2014-03-10 21:01:43

This is a popular Bootstrap question, so I've updated and expanded the answer for Bootstrap 3 and Bootstrap 4...

The Bootstrap 3 "height problem" occurs because the columns use float:left. When a column is “floated” it’s taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of its containing box. So, when you have uneven column heights, the correct behavior is to stack them to the closest side.

Bootstrap uneven wrapping columns

Note: The options below are applicable for column wrapping scenarios where there are more than 12 col units in a single .row. For readers that don't understand why there would ever be more than 12 cols in a row, or think the solution is to "use separate rows" should read this first


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

1 - The 'clearfix' approach (recommended by Bootstrap) like this (requires iteration every X columns). This will force a wrap every X number of columns...

enter image description here

<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 (single tier)

Clearfix Demo (responsive tiers) - eg. col-sm-6 col-md-4 col-lg-3

There is also a CSS-only variation of the 'clearfix'
CSS-only clearfix with tables


2 - Make the columns the same height (using flexbox):

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

enter image description here

.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 the columns an use inline-block instead..

Again, the height problem only occurs because the columns are floated. Another option is to set the columns to display:inline-block and float:none. This also provides more flexibility for vertical-alignment. However, with this solution there must be no HTML whitespace between columns, otherwise the inline-block elements have additional space and will wrap prematurely.

Demo of inline block fix


4 - CSS3 columns approach (Masonry/Pinterest like solution)..

This is not native to Bootstrap 3, but another approach using CSS multi-columns. One downside to this approach is the column order is top-to-bottom instead of left-to-right. Bootstrap 4 includes this type of solution: Bootstrap 4 Masonry cards Demo.

Bootstrap 3 multi-columns Demo

5 - Masonry JavaScript/jQuery approach

Finally, you may want to use a plugin such as Isotope/Masonry: enter image description here

Bootstrap Masonry Demo
Masonry Demo 2


More on Bootstrap Variable Height Columns


Update 2018
All columns are equal height in Bootstrap 4 because it uses flexbox by default, so the "height issue" is not a problem. Additionally, Bootstrap 4 includes this type of multi-columns solution: Bootstrap 4 Masonry cards Demo.

@Josh 2017-06-22 08:52:10

Here is a good guideline on vertical alignment in bootstrap v4-alpha.getbootstrap.com/layout/grid. Particularly vertical alignment and class "row align-items-start"

@Paullo 2017-12-21 07:54:49

WooW! you earn my up vote for this bootply.com/120682. With Masonry plugin, it looks good on page load not good when you drag to adjust the screen width

@Ahmed M.Kamal 2019-09-20 08:08:15

The card-columns works for me.

@Steve Whitby 2017-11-08 18:41:52

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;
}

@RohitAneja 2018-11-15 06:01:10

This did work for me. Only i put second css to .col property

Related Questions

Sponsored Content

33 Answered Questions

[SOLVED] How can I make Bootstrap columns all the same height?

42 Answered Questions

32 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1874160 View
  • 2027 Score
  • 32 Answer
  • Tags:   html css height

47 Answered Questions

[SOLVED] How can I transition height: 0; to height: auto; using CSS?

  • 2010-08-18 02:50:35
  • Hailwood
  • 958967 View
  • 2000 Score
  • 47 Answer
  • Tags:   css css-transitions

10 Answered Questions

13 Answered Questions

[SOLVED] What's the difference between SCSS and Sass?

  • 2011-04-13 19:23:09
  • bruno077
  • 746064 View
  • 1768 Score
  • 13 Answer
  • Tags:   css sass

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 918980 View
  • 1756 Score
  • 31 Answer
  • Tags:   html css html-table

23 Answered Questions

[SOLVED] vertical-align with Bootstrap 3

33 Answered Questions

[SOLVED] Center a column using Twitter Bootstrap 3

25 Answered Questions

[SOLVED] Flex-box: Align last row to grid

Sponsored Content