By Richard


2013-10-30 23:31:37 8 Comments

I'm using Bootstrap. How can I make three columns all the same height?

Here is a screenshot of the problem. I would like the blue and red columns to be the same height as the yellow column.

Three bootstrap columns with the center column longer than the other two columns

Here is the code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
    <div class="col-xs-4 panel" style="background-color: red">
        some content
    </div>
    <div class="col-xs-4 panel" style="background-color: yellow">
        catz
        <img width="100" height="100" src="https://lorempixel.com/100/100/cats/">
    </div>
    <div class="col-xs-4 panel" style="background-color: blue">
        some more content
    </div>
</div>
</div>

30 comments

@MD Ashik 2019-03-19 17:11:55

03/19/2019

**Bootstrap 4 Equal Height Solution **

Bootstrap Utilities/flex for equal height

Live example in Codepen

Equal height by bootstrap class with parent div fixed height or min-height

<div class="d-flex align-content-stretch flex-wrap" style="min-height: 200px">
    <div>Flex height test text for example , Flex height test text for example </div>
    <div>Flex item</div>
    <div>Flex item</div>
    <div>Flex item</div>
 </div>

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}
.fixed-height-200 {
  min-height: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<br><br><br>
<div class="d-flex align-content-stretch flex-wrap fixed-height-200">
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight bg-danger">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-info">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-light">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item <br> 1111111111</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight bg-primary">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
    <div class="p-2 bd-highlight">Flex item</div>
</div>

@Znaneswar 2017-11-17 06:40:30

If anyone using bootstrap 4 and looking for equal height columns just use row-eq-height to parent div

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row row-eq-height">
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4<br>this is<br>a much<br>taller<br>column<br>than the others</div>
  <div class="col-xs-4" style="border: 1px solid grey;">.row.row-eq-height &gt; .col-xs-4</div>
</div>

Ref: http://getbootstrap.com.vn/examples/equal-height-columns/

@arts777 2017-11-27 01:10:58

Should be accepted.

@Pacific P. Regmi 2017-11-25 08:33:36

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span4 option2">
            <p>left column </p>
            <p>The first column has to be the longest The first column has to be the longes</p>
        </div>

        <div class="span4 option2">
            <p>middle column</p>
        </div>

        <div class="span4 option2">
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
            <p>right column </p>
        </div>
    </div>
</div>

CSS

.option2 { background: red; border: black 1px solid; color: white; }

JS

$('.option2').css({
    'height': $('.option2').height()
});

@Dagmar 2019-01-17 12:11:20

So yes, Bootstrap 4 does make all the cols in a row equal height, however if you are creating a border around the content inside the row you may find that it appears like the cols are not equal heights!

When I applied height: 100% to the element inside the col I found that I lost my margin.

My solution is to use padding on the col's div (instead of a margin on the inner element). Like so:

<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
        <div class="col-lg-4 col-md-6 col-12 py-4">
            <div class="h-100 border round">
                        ...
            </div>
        </div>
    </div>
</div>

The above code example uses Bootstrap 4.1 to create a set of nine boxes with a border

@BuffMcBigHuge 2018-11-07 20:18:14

I'm surprised I couldn't find a worthwhile solution here late 2018. I went ahead and figured it out a Bootstrap 3 solution myself using flexbox.

Clean and simple example:

Example of matched column widths in Bootstrap 3

HTML

<div class="row row-equal">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <img src="//placehold.it/200x200">
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 col-equal">
        <p>Text</p>
    </div>  
</div>

CSS

img {
  width: 100%;
}
p {
  padding: 2em;
}
@media (min-width: 768px) {
  .row-equal {
    display: flex;
    flex-wrap: wrap;
  }
  .col-equal {
    margin: auto;
  }
}

View working demo: http://jsfiddle.net/5kmtfrny/

@Bryan Willis 2015-12-20 12:48:38

To answer your question this is all you need see full responsive demo with prefixed css:

/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/

@media only screen and (min-width : 481px) {
    .flex-row {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-row > [class*='col-'] {
        display: flex;
        flex-direction: column;
    }
    .flex-row.row:after, 
    .flex-row.row:before {
        display: flex;
    }
}

Screenshot of Codepen

To add support for thumbnail content flex within flex columns like the screenshot above also add this... Note you could do this with panels as well:

.flex-row .thumbnail,
.flex-row .caption {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}
.flex-text {
    flex-grow: 1;
}    
.flex-row img {
    width: 100%;
}

While flexbox doesn't work in IE9 and below you can use the demo with a fallback using conditional tags with something like javascript grids as a polyfill:

<!--[if lte IE 9]>

<![endif]-->

As for the other two examples in the accepted answer... The table demo is a decent idea but is being implemented wrong. Applying that CSS on bootstrap column classes specifically will without a doubt break the grid framework entirely. You should be using a custom selector for one and two the tables styles should not be applied to [class*='col-'] that have defined widths. This method should ONLY be used if you want equal height AND equal width columns. It is not meant for any other layouts and is NOT responsive. We can make it fallback however on mobile displays...

<div class="table-row-equal">
<div class="thumbnail">
    Content...
</div>
<div class="thumbnail">
    Content...
</div>
</div>
@media only screen and (min-width : 480px){
    .table-row-equal {
        display: table;
        width: 100%;
        table-layout: fixed;
        border-spacing: 30px 0px;
        word-wrap: break-word;
    }
    .table-row-equal .thumbnail {
        float: none;
        display: table-cell;
        vertical-align: top;
        width: 1%;
    }
}

Lastly, the first demo in the accepted answer which implements a version of the one true layout is a good choice for some situations, but not suitable for bootstrap columns. The reason for this is that all the columns expand to the container height. So this will also break responsiveness since the columns are not expanding to the elements next to them, but the entire container. This method will also not allow you to apply bottom margins to rows any longer and will also cause other issues along the way like scrolling to anchor tags.

For the complete code see the Codepen which automatically prefixes the flexbox code.

@ken2k 2016-04-07 08:42:00

That is the only one answer that actually worked for me. The 3 top rated answers were just a waste of time

@Bryan Willis 2016-04-08 06:46:56

Glad somebody found it useful. I definitely wasted way too much time creating that demo! One thing to note when using this and flexbox in general is that not all browsers are created equal. It is a pretty new concept and there are some quirks with it still depending on your layouts, so just make sure you do some cross browser testing before using it live.

@Bryan Willis 2016-04-08 06:48:04

Also if you do run into any issues with my method in the demo, I'd love to hear about it so I can make sure to fix it or add your example.

@Marcelo 2016-04-19 17:13:22

This is awesome and works great.

@Marcelo 2016-04-21 02:22:44

@bwillis Had to edit the masonry example to use .masonary-row > [class*="col-"] to not break inner cols and added a breakpoint at 992px to have another column, but apart from that the Masonry works like a charm, kudos!

@Matthew Lock 2016-05-18 04:46:10

Yes this is the only answer here that works and is responsive. Make this the accepted answer.

@KevinH 2016-05-24 12:22:43

Looks good, but unfortunately it doesn't work in Safari 9.1 on MacOS :-(

@Bryan Willis 2016-05-27 15:10:07

Thanks for the heads up @TheSchecke I will check it out today and update.

@Bryan Willis 2016-05-27 15:56:19

@TheSchecke here is the fix. As far as I know this works in all flexbox supported browsers now. Please let me know if I'm wrong. s.codepen.io/bootstrapped/debug/pboJNd. The problem had to do with the row:after, row:before having display: table set which apparently Safari doesn't like.

@Matthew Lock 2016-07-08 00:31:36

Just a heads up that this breaks really badly on the iPad's Safari browser

@Bryan Willis 2016-07-08 05:09:18

Sorry to hear that @MatthewLock. I just tested on my IPad Air IOS 8.1 with latest safari and it works on that. I was also able to test on on crossbrowsertesting.com using iPad mini retina with Safari 7 and that seems to be working fine too. Here's the results of that test. Can you provide the iPad and Safari version you are using? I'd love to try to get this fixed asap or at least put a comment in the answer as I know a lot of people are using it.

@Matthew Lock 2016-07-09 01:46:58

Thanks Bryan. I will check that out.

@Jordan.J.D 2017-09-13 21:07:46

wanting to look at this, the codepen has expired

@Bryan Willis 2017-10-11 05:49:00

@Jordan.J.D which link? They don't seem to be expired as far as I can tell.

@鄭元傑 2018-01-11 06:31:22

This answer is useful. thanks alot

@YUzhva 2018-08-17 10:20:03

Safary issue fixed with a help of ::before and ::after pseudo!) Thanks a lot man!)

@ken2k 2018-11-22 16:35:04

Came back for the same question more than two years later, not disappointed I commented/voted for this answer the first time, still perfectly fine and problem fixed within a few minutes!

@Jay 2019-03-21 14:34:59

This answer is da bom! The only one that worked for me consistently, and on iPad Safari (iOS 12).

@kfn 2018-04-04 15:01:40

I searched for a solution to the same problem, and found one just worked !! - with almost no extra code..

see https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27 for a good disuccuion, and with the resposne you want in the bottom, with a link.

https://www.codeply.com/go/EskIjvun4B

this was the correct responsive way to for me... a quote: ... 3 — Use flexbox (best!)

As of 2017, the best (and easiest) way to make equal height columns in a responsive design is using CSS3 flexbox.

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

and simply use:

div class="container">
   <div class="row display-flex .... etc..

@Zim 2014-04-06 10:25:34

Update 2018

Best approach for Bootstap 3.x -- using CSS flexbox (and requires minimal CSS)..

.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

Bootstrap same height flexbox example

To only apply the same height flexbox at specific breakpoints (responsive), use a media query. For example, here is sm(768px) and up:

@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}

This solution also works well for multiple rows (column wrapping):
https://www.bootply.com/gCEXzPMehZ

Other workarounds

These options will be recommended by others, but are not a good idea for responsive design. These only work for simple single row layouts w/o column wrapping.

1) Using huge negative margins & padding

2) Using display:table-cell (this solution also effects the responsive grid, so a @media query can be used to only apply table display on wider screens before the columns stack vertically)


Bootstrap 4

Flexbox is now used by default in Bootstrap 4 so there is no need for the extra CSS to make equal height columns: http://www.codeply.com/go/IJYRI4LPwU

@Stanley 2014-09-03 07:21:33

The row is no longer responsive after applying this.

@Zim 2014-09-17 14:04:17

You can use a media-query to only apply the flexbox on larger/wider devices. I updated the bootply: bootply.com/Cn6fA6LuTq

@Justin Lau 2015-06-28 12:30:26

In case anyone is interested, I have created a pen to demonstrate similar effects on a form using flexbox.

@Chris Moschini 2015-07-28 00:05:56

Does not work in IE8 or 9, nor Android 2.x caniuse.com/#feat=flexbox

@zool 2016-06-05 21:02:32

CSS is not markup.

@dandaka 2017-03-02 08:12:14

@ZimSystem Your code in Codeply doesn't work in Safari 10.0.3 / OSX take.ms/bj31b

@Zim 2017-03-02 10:56:06

It's a known Safari bug with flexbox: proof: bugs.webkit.org/show_bug.cgi?id=137730

@Zim 2017-03-29 15:35:52

@Stanley the comment about "no longer responsive" is old and irrelevant.

@Crasher 2018-03-11 04:17:54

Doesnt work at all

@Zim 2018-03-11 11:46:39

And, how is that? It works for me at and least 194 other people ;-)

@Randell 2018-07-23 23:04:00

What could be the possible reasons for these styles not to work in some cases?

@observer 2019-01-04 14:43:08

The first 2 links don't work any more: "Application error"

@Ryan NZ 2019-01-11 05:50:35

This is the only fix that worked for me. Thanks Zim this is great!

@Zachary Weixelbaum 2015-09-13 19:01:10

Some of the previous answers explain how to make the divs the same height, but the problem is that when the width is too narrow the divs won't stack, therefore you can implement their answers with one extra part. For each one you can use the CSS name given here in addition to the row class that you use, so the div should look like this if you always want the divs to be next to each other:

<div class="row row-eq-height-xs">Your Content Here</div>

For all screens:

.row-eq-height-xs {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: row;
}

For when you want to use sm:

.row-eq-height-sm {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:768px) {
    .row-eq-height-sm {
        flex-direction: row;
    }
}

For when you want to md:

.row-eq-height-md {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:992px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

For when you want to use lg:

.row-eq-height-lg {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-direction: column;
}
@media (min-width:1200px) {
    .row-eq-height-md {
        flex-direction: row;
    }
}

EDIT Based on a comment, there is indeed a simpler solution, but you need to make sure to give column info from the largest desired width for all sizes down to xs (e.g. <div class="col-md-3 col-sm-4 col-xs-12">:

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

@Bryan Willis 2015-12-20 11:57:29

You made that a lot more complicated than you needed to :) ` Just use flex-wrap: wrap; then you don't need all the separate ones... unless you specifically want them.

@Matthew Lock 2016-07-08 00:33:58

this fails on iPad Safari

@DarkScrolls 2015-01-30 10:17:51

.row.container-height {
	overflow: hidden; 
}

.row.container-height > [class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

where .container-height is the style class that has to be added to a .row styled element to which all its .col* children have the same height.

Applying these styles only to some specific .row (with .container-height, as in the example) also avoids applying the margin and padding overflow to all .col*.

@Kevin R. 2015-04-29 10:40:21

No JavaScript needed. Just add the class .row-eq-height to your existing .row just like this:

<div class="row row-eq-height">
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
    some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
    kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
    some more content
  </div>
</div>

Tip: if you have more than 12 columns in your row, the bootstrap grid will fail to wrap it. So add a new div.row.row-eq-height each 12 columns.

Tip: you may need to add

<link rel="stylesheet" href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" />

to your html

@Chris Moschini 2015-07-28 00:05:45

flexbox-based. Does not work in IE8 or 9, nor Android 2.x caniuse.com/#feat=flexbox

@Phil Cook 2015-10-30 15:42:14

Does not work as far as I can see. jsbin.com/ravudobovo/edit?html,output

@Bpainter 2016-03-22 14:53:46

Also does not work for me.

@Zim 2016-04-08 12:50:26

Note: getbootstrap.vn is not "Bootstrap". It's a 3rd party project.

@Cyril Duchon-Doris 2016-05-01 15:50:51

This seems to be integrated in bootstrap v4 though.

@Omar 2016-08-13 17:06:31

it doesn't work for me also

@ekkis 2016-10-05 23:30:05

I included the correct CSS (from the .vn site) but it messes everything up. it's based on flex

@Armada 2017-02-14 09:57:54

Great...plugin hell.

@Gediminas 2017-02-21 16:58:43

Cool, but this stylesheet include additional red and bordered styles to .col classes - this is not cool :(

@guido _nhcol.com.br_ 2018-12-04 17:11:47

NOT working in Bootstrap 4. this selector comes from somewhere else but is not part of bootstrap4 What worked for me is Solution 3) above with a slight change from flex to grid in the column selector .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: grid; //here flex-direction: column; }

@grinmax 2017-03-06 11:16:09

Try this do through flex-box

.container {
	display: flex;
	padding-bottom: 50px;
}
.col {
	background: blue;
	padding: 30px;
}

.col.center {
	background: red;
	height: 100px;
	margin-bottom: -50px;
}
<div class="container">
  <div class="col">Left</div>
  <div class="col center">Center</div>
  <div class="col">Right</div>
</div>

Live JSFiddle - https://jsfiddle.net/grinmax_/spsn4fnq/

@Adam Lindqvist 2017-03-02 07:47:59

I tried alot of the suggestions made in this thread and on other pages but no solution worked 100% in every browsers.

So I experimented quite some time and came up with this. A complete solution for Bootstrap Equal Height columns with the help of flexbox with only 1 class. This works in all major browsers IE10+.

CSS:

.row.equal-cols {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.row.equal-cols:before,
.row.equal-cols:after {
  display: block;
}

.row.equal-cols > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.row.equal-cols > [class*='col-'] > * {
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto; 
}

HTML:

<div class="container">
  <div class="row equal-cols">
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
    <div class="col-sm-4">
      <div class="content"></div>
    </div>
  </div>
</div>

To support even more versions of IE you can, for example, use https://github.com/liabru/jquery-match-height and target all child columns of .equal-cols. Like this:

// Create a check for IE9 (or any other specific browser).
if(IE9) {
  $(".row.equal-cols > [class*='col-']").matchHeight();
}

Without this polyfill the columns will behave as usual Bootstrap columns so which is a quite good fallback.

@Tom Kur 2017-01-25 13:11:06

You can wrap the columns inside a div

<div class="row">
<div class="col-md-12>
  <div class="col-xs-12 col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://placekitten.com/100/100">
  </div>
  <div class="col-xs-6 col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>
</div>

@Ray Hunter 2017-03-13 21:40:08

Did not work for me with a button in one of the columns.

@eaglei22 2016-11-10 18:21:12

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

From:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

@Vivek 2016-11-17 06:11:21

best way seen so far.

@Ali Akbar Reyad 2016-11-07 11:56:35

You can use below code

var heights = $(".row > div").map(function() {
    return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row > div").height(maxHeight);

@Popnoodles 2013-10-30 23:38:05

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

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

@Richard 2013-10-31 09:22:47

WOW. Thanks. Why does that work?

@Popnoodles 2013-10-31 11:50:09

Think of it as the column being sucked into negative space. If you remove the overflow you'll see what's going on.

@itsjavi 2014-02-11 11:55:38

It works but has a problem if you need to absolutely positioning some element at the bottom: it's hidden by the overflow. Nested elements neither can't determine the actual visible height, without javascript.

@Popnoodles 2014-02-11 19:24:59

@mjolnic good point. I'd like to find a better solution. I would have thought height 100% and display block might help.

@Dr.Flink 2014-03-05 10:19:17

You could also do it like this: jsfiddle.net/nV3Ua/1

@Carlos Cervantes 2014-03-24 18:48:30

This doesn't work in Firefox.

@Popnoodles 2014-03-25 00:17:57

it works in Firefox for me. Can you share your code?

@Logan G. 2014-06-05 16:46:26

If targeting the bootstrap column class specifically you should probably use an anchor ^ instead of a wildcard *. Using ^ will say that the class must start with col- where as the wildcard shown will match any class with col- anywhere in the string, possibly having undesired effects on styles where you may have used the convention col-. (i.e. stuff-col-morestuff).

@Popnoodles 2014-06-05 18:53:42

@LiquaFoo I agree but that's how bootstrap's selector is.

@Gediminas 2014-07-23 12:34:27

It works only with single line of blocks. For more block, it ads them in right side again until it brakes view zone.

@Ray 2014-08-04 09:31:25

@Popnoodles I can share my code stackoverflow.com/questions/25000554/…

@Chet 2014-08-10 00:20:36

why doens't height:100% just work?>

@Notflip 2014-08-13 13:40:11

This is working but my col-xs-12 is being ignored now.. How do i fix that?

@eloone 2014-09-06 10:54:47

Solution 1 is very elegant

@Kamesh 2014-09-25 06:28:47

Exactly what i want. Thanks a lot!

@Mike Boutin 2015-02-05 15:29:39

Solution 1 can make width problems

@Ohad Schneider 2015-02-06 16:35:51

Nice answer, with some caveats. Solution 1 disables the float and therefore breaks the bootstrap grid responsive behavior. Solution 2 (explained in greater depth in positioniseverything.net/articles/onetruelayout/equalheight) doesn't show the bottom border (as it is clipped somewhere in the padding space).

@fyr91 2015-02-08 12:19:32

Hello, I am facing the same problem. But after I tried the solutions, the column does not seems to be responsive. How to fix that?

@LedZelkin 2015-02-08 17:31:03

Solution2 is responsive in my case but not the first one who occured some bug with bootstrap 3

@ZZY 2015-02-14 03:56:41

I found a problem with solution 2: if there are elements with attr id="xxx" and users jump to the ID, contents above the element fail to display (demo: paste the codes to a local html file, open it with ".../xxx.html#p3"). Solution 1 seems working fine, hope I won't find any issue with it.

@ZZY 2015-02-16 14:18:23

@Notflip, I faced the same issue that "col-xs-12" doesn't make the next "col" to next line. My workaround is to apply solution 1 only to >= small device, as @media(min-width:768px) { Solution 1 }

@zajca 2015-05-14 08:30:46

Non of this solutions working at all. 1) destroys bs3 grid responsive not working since float:none 2) this solution isn't doing cols same size in responsive, here is demonstration: bootply.com/SmpoLAKqO1

@zajca 2015-05-14 09:08:16

Actually there are two thing what you could want, one is simple same col height without responsive, for this is best solution 2. Other one is to avoid jumping of col if text change height of one col to another, for this is best this solution -> stackoverflow.com/a/24747063/1269774. If you want both, use javascript or flexbox or write your own grid using table.

@Zain 2015-05-27 06:18:04

in case of two columns when resize browser screen (on mid, sm etc) first columns hides... why ?? how to fix it

@Christine268 2015-06-04 01:38:43

+1 Only for the second solution because it does not break the Bootstrap responsiveness. Any answer that does is useless when dealing with Bootstrap.

@Anish Nair 2015-10-12 06:47:50

Solution ! did work for me. But I had to add the !important to margin. Like this: margin-bottom: -99999px !important;

@SPRBRN 2015-10-15 10:40:23

Solution 3 breaks row responsiveness.

@Dragan 2015-12-08 18:29:26

you're a legend, thanks for your answer!

@Bryan Willis 2015-12-20 13:07:06

These are all great examples for equal height columns although in this situation they all break the bootstrap grid framework. You should never do this explicitly to the row and column classes. Add your own class. The first one, while effective for fluid layouts is not good for responsive layouts as it applies all columns height to the height of the .row even if their not on the same row. The second one is missing styles and should not use BS columns as table cells. Tables are meant to use border-spacing while bootstrap col- classes use padding for their spacing. Using together wont work.

@Bryan Willis 2015-12-20 13:13:45

@Popnoodles you should add flex-wrap: wrap; to the third example to enable responsiveness. You also will want to add display: flex; flex-direction: column; to the column class. If you are going to use .row and not a custom class, you'll need to provide a fallback for older browsers changing the display flex back. Here's an example

@Farzad YZ 2016-02-10 14:26:58

The negative margins where super smart!!

@Tacocat 2016-03-03 00:10:53

@BryanWillis Perfect answer! The solutions in this answer did not work for me. Thank you!

@Sikander 2016-03-24 06:23:18

god bless you :)

@Vertisan 2016-04-04 21:20:28

I tried to make it out each method, but none of them work, here is my demo: DEMO

@gugol 2016-04-26 16:33:24

@bwillis what does exactly do display: flex; flex-direction: column; in the column class? It seems to do nothing noticeable.

@krx 2016-05-14 20:19:10

The new flexbox solution fits all my requirements.

@Matthew Lock 2016-05-18 04:41:23

The 3rd solution is close, but in IE 11 the stacked divs seem to be too wide, and in FF the stacked divs have different widths.

@johntrepreneur 2016-05-25 23:12:10

Solution 1 hides the bottom border.

@David Qin 2016-06-15 04:14:43

I prefer solution 2, and I add width: 100% for .row

@Eugen Konkov 2016-07-05 10:01:39

@LoganG. ^ does not work for this class =" test col-md-2"

@Shahbaz 2016-07-19 22:51:09

Solution 1 only worked for me.

@Hakam Fostok 2016-10-27 15:17:03

three solution did not worked

@Popnoodles 2016-11-03 16:58:05

@HakamFostok These solutions have worked for 100s of others hence the upvotes. Feel free to post a new question with your bad code so that someone can advise where you have misunderstood.

@Hakam Fostok 2016-11-03 18:55:26

My code is not bad

@Popnoodles 2016-11-03 18:56:08

None of the solutions, that work for 100s of others, work against your code, yet, despite the principal of Occam's razor, your wish is to downvote this answer multiple times. Hardly fair.

@Patrick 2016-11-09 13:33:57

Solution 3: flex-wrap: wrap breaks on safari-mobile. I removed it and it works for me

@Recomer 2016-11-24 20:18:30

You are the best!

@Ting Yi Shih 2017-01-19 03:28:37

Negative margin works the best. The other two solutions break the responsive property (will not wrap on small screen)

@Rudey 2017-01-30 15:28:09

Solution 3 doesn't work in Safari. .row::before { display: block; } fixes that but I'm not sure why.

@Bimal Das 2017-02-09 13:01:38

working perfectly... :)

@Zim 2017-03-14 23:45:13

table-cell or negative margins don't really work when it comes to responsive design

@GhitaB 2017-05-16 12:37:02

THE BEST!!! :D Thank you. :)

@Guilherme Felipe Reis 2018-07-05 11:31:15

Thank you so much, the first solution works really good for me but the table-cell one doesn't work on my environment. THANK YOU SO MUCH!

@Neal 2016-10-04 18:05:58

For those looking for a quick, easy solution - if you have a relatively consistent set of block content setting a min-height on the div that is a bit bigger than the largest block can be easier to implement.

.align-box {
    min-height: 400px;
}

@Eddy Goh 2016-07-03 08:21:21

Just checking through bootstrap documentation and I found the simple solution for the problem of column same height.

Add the extra clearfix for only the required viewport

<div class="clearfix visible-xs-block"></div>

For example:

<div class="col-md-3 col-xs-6">This is a long text</div>
<div class="col-md-3 col-xs-6">This is short</div>
<div class="clearfix visible-xs-block">This is a long text</div>
<div class="col-md-3 col-xs-6">Short</div>
<div class="col-md-3 col-xs-6">Long Text</div>
<div class="clearfix visible-xs-block"></div>
<div class="col-md-3 col-xs-6">Longer text which will push down</div>
<div class="col-md-3 col-xs-6">Short</div>

Please refer to http://getbootstrap.com/css/#grid-responsive-resets

@Oleg 2016-05-19 14:43:42

I use this super easy solution with clearfix, which doesn't have any side effects.

Here is an example on AngularJS:

<div ng-repeat-start="item in list">
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
</div>
<div ng-repeat-end>
    <div ng-if="$index % 3 == 2" class="clearfix visible-lg"></div>
    <div ng-if="$index % 2 == 1" class="clearfix visible-md"></div>
</div>

And one more example on PHP:

<?php foreach ($list as $i => $item): ?>
    <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"></div>
    <div class="clearfix visible-md"></div>
    <?php if ($i % 2 === 1): ?>
        <div class="clearfix visible-lg"></div>
    <?php endif; ?>
<?php endforeach; ?>

@skerit 2016-08-25 14:00:37

This does not make your columns all the same height, though.

@Marty 2014-08-25 06:15:03

cheeky jquery solution if anyone's interested. Just make sure all your cols (el) have a common classname...works responsively too if you bind it to $(window).resize

function equal_cols(el)
{
    var h = 0;
    $(el).each(function(){
        $(this).css({'height':'auto'});
        if($(this).outerHeight() > h)
        {
            h = $(this).outerHeight();
        }
    });
    $(el).each(function(){
        $(this).css({'height':h});
    });
}

Usage

$(document).ready(function(){
   equal_cols('.selector');
});

Note: This post has been edited as per @Chris' comment out that the code was only set the last highest height in the $.each() function

@Jordon 2015-01-17 03:36:25

This is understated - simple and small yet will resize all columns without needing to have a fixed number of columns in a row. Nice one!

@Chris 2015-02-05 11:06:11

This isn't working, cause you set the last biggest height in the each function. If the third column is the highest column, column 1 and 2 aren't getting the right height.. You have to set the last line "$(this).css({'height':h});" after the each function. I will do an edit.

@Chris Staikos 2015-05-06 14:25:20

If it makes sense in your context, you can simply add an empty 12-column div after each break, which acts as a divider that hugs the bottom of the tallest cell in your row.

<div class="row">
   <div class="col-xs-6">Some content</div>
   <div class="col-xs-6">
      Lots of content! Lots of content! Lots of content! Lots of content! Lots of content! 
   </div>
   <div id="spacer-div" class="col-xs-12"></div>
   <div class="col-xs-6">More content...</div>
</div><!--this You forgot to close -->

Hope this helps!

@Ellisan 2017-11-24 14:26:35

This does not answer the question he asked!

@Faiz 2016-02-25 04:52:01

I know I'm very late but now you can use the "min-height" style attribute to achieve your purpose.

@J0ANMM 2017-06-17 15:18:48

Super simple and it worked for my case.

@Ajay Sathish 2016-02-15 11:16:07

Here is my method, i have used flex with some changes in media query.

  @media (min-width: 0px) and (max-width: 767px) {
  .fsi-row-xs-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .fsi-row-sm-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .fsi-row-md-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}
@media (min-width: 1200px) {
  .fsi-row-lg-level {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

then added the classes to the parent which were required.

<div class="row fsi-row-lg-level fsi-row-md-level">
<div class="col-sm-4">column 1</div>
<div class="col-sm-4">column 2</div>
<div class="col-sm-4">column 3</div>
</div>

I am using responsive breakpoints because flux usually hampers the bootstrap standard responsive nature.

@JoeTidee 2014-03-27 21:14:45

Thought I'd just add that the answer given by Dr.Flink can also be applied to a Bootstrap 3 form-horizontal block - which can be very handy if you want to use background colours for each cell. In order for this to work for bootstrap forms, you would need to wrap the form contents which just serves to replicate a table-like structure.

The example below also provides the CSS which demonstrates an additional media query allows Bootstrap 3 to simply takeover and do it's normal thing on the smaller screen(s). This also works in IE8+ .

Example:

<form class="form-horizontal" role="form">

  <div class="form-wrapper">
    <div class="form-group">
      <label class="col-xs-12 col-sm-2 control-label">My Label</label>
      <div class="col-xs-12 col-sm-10">
        Some content
      </div>
    </div>
  </div>

</form>
.form-wrapper {
  display: table;
}

.form-wrapper .form-group {
  display: table-row;
}

.form-wrapper .form-group .control-label {
  display: table-cell;
  float: none;
}

.form-wrapper .form-group label + div {
  display: table-cell;
  float: none;
}

@media (max-width: 768px) {
  .form-wrapper {
    display: inherit;
  }
  .form-wrapper .form-group {
    display: block;
  }
  .form-wrapper .form-group .control-label {
    display: inherit;
  }
  .form-wrapper .form-group label + div {
    display: inherit;
  }
}

@Станислав Пономарев 2015-12-01 02:53:46

There is a problem with using Solution 1 while appling it on only column in rows. Would like to improve Solution 1.

 [class^="col-"]:not([class*="-12"]){
      margin-bottom: -99999px;
      padding-bottom: 99999px;
  }

(Sorry, can't comment Popnoodles's anwer. I have not enough reputations)

@Chris Moschini 2015-07-28 01:03:12

@media (min-width: @screen-sm-min) {
    div.equal-height-sm {
        display: table;


        > div[class^='col-'] {
            display: table-cell;
            float: none;
            vertical-align: top;
        }
    }
}

<div class="equal-height-sm">
    <div class="col-xs-12 col-sm-7">Test<br/>Test<br/>Test</div>
    <div class="col-xs-12 col-sm-5">Test</div>
</div>

Example:

https://jsfiddle.net/b9chris/njcnex83/embedded/result/

Adapted from several answers here. The flexbox-based answers are the right way once IE8 and 9 are dead, and once Android 2.x is dead, but that is not true in 2015, and likely won't be in 2016. IE8 and 9 still make up 4-6% of usage depending on how you measure, and for many corporate users it's much worse. http://caniuse.com/#feat=flexbox

The display: table, display: table-cell trick is more backwards-compatible - and one great thing is the only serious compatibility issue is a Safari issue where it forces box-sizing: border-box, something already applied to your Bootstrap tags. http://caniuse.com/#feat=css-table

You can obviously add more classes that do similar things, like .equal-height-md. I tied these to divs for the small performance benefit in my constrained usage, but you could remove the tag to make it more generalized like the rest of Bootstrap.

Note that the jsfiddle here uses CSS, and so, things Less would otherwise provide are hard-coded in the linked example. For example @screen-sm-min has been replaced with what Less would insert - 768px.

@öbl 2015-05-04 15:38:10

Best out there:

Github reflex - Docs

Works with bootstrap

Update:

  1. Include the CSS
  2. Update your code:

/*!
 *
 * Reflex v1.0
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: [email protected]
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */
.reflex-order-12 {
  -webkit-order: 12;
  -ms-flex-order: 12;
  order: 12;
}
.reflex-order-11 {
  -webkit-order: 11;
  -ms-flex-order: 11;
  order: 11;
}
.reflex-order-10 {
  -webkit-order: 10;
  -ms-flex-order: 10;
  order: 10;
}
.reflex-order-9 {
  -webkit-order: 9;
  -ms-flex-order: 9;
  order: 9;
}
.reflex-order-8 {
  -webkit-order: 8;
  -ms-flex-order: 8;
  order: 8;
}
.reflex-order-7 {
  -webkit-order: 7;
  -ms-flex-order: 7;
  order: 7;
}
.reflex-order-6 {
  -webkit-order: 6;
  -ms-flex-order: 6;
  order: 6;
}
.reflex-order-5 {
  -webkit-order: 5;
  -ms-flex-order: 5;
  order: 5;
}
.reflex-order-4 {
  -webkit-order: 4;
  -ms-flex-order: 4;
  order: 4;
}
.reflex-order-3 {
  -webkit-order: 3;
  -ms-flex-order: 3;
  order: 3;
}
.reflex-order-2 {
  -webkit-order: 2;
  -ms-flex-order: 2;
  order: 2;
}
.reflex-order-1 {
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}
.reflex-order-0 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
}
.reflex-container {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  letter-spacing: -0.31em;
  *letter-spacing: normal;
  word-spacing: -0.43em;
  list-style-type: none;
}
.reflex-container *,
.reflex-container:before,
.reflex-container:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.reflex-container *:before,
.reflex-container *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*="reflex-col-"] {
  width: 100%;
  vertical-align: top;
  position: relative;
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  text-align: left;
  text-align: start;
}
.reflex-item {
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .reflex-item {
  width: 100%;
}
.reflex-col-12 {
  width: 100%;
  *width: 99.9%;
}
.reflex-col-11 {
  width: 91.66666666666666%;
  *width: 91.56666666666666%;
}
.reflex-col-10 {
  width: 83.33333333333334%;
  *width: 83.23333333333335%;
}
.reflex-col-9 {
  width: 75%;
  *width: 74.9%;
}
.reflex-col-8 {
  width: 66.66666666666666%;
  *width: 66.56666666666666%;
}
.reflex-col-7 {
  width: 58.333333333333336%;
  *width: 58.233333333333334%;
}
.reflex-col-6 {
  width: 50%;
  *width: 49.9%;
}
.reflex-col-5 {
  width: 41.66666666666667%;
  *width: 41.56666666666667%;
}
.reflex-col-4 {
  width: 33.33333333333333%;
  *width: 33.23333333333333%;
}
.reflex-col-3 {
  width: 25%;
  *width: 24.9%;
}
.reflex-col-2 {
  width: 16.666666666666664%;
  *width: 16.566666666666663%;
}
.reflex-col-1 {
  width: 8.333333333333332%;
  *width: 8.233333333333333%;
}
@media (min-width: 480px) {
  .reflex-col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-xs-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-xs-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-xs-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-xs-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-xs-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-xs-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-xs-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-xs-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 768px) {
  .reflex-col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-sm-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-sm-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-sm-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-sm-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-sm-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-sm-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-sm-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-sm-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 992px) {
  .reflex-col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-md-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-md-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-md-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-md-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-md-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-md-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-md-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-md-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
@media (min-width: 1200px) {
  .reflex-col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .reflex-col-lg-11 {
    width: 91.66666666666666%;
    *width: 91.56666666666666%;
  }
  .reflex-col-lg-10 {
    width: 83.33333333333334%;
    *width: 83.23333333333335%;
  }
  .reflex-col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .reflex-col-lg-8 {
    width: 66.66666666666666%;
    *width: 66.56666666666666%;
  }
  .reflex-col-lg-7 {
    width: 58.333333333333336%;
    *width: 58.233333333333334%;
  }
  .reflex-col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .reflex-col-lg-5 {
    width: 41.66666666666667%;
    *width: 41.56666666666667%;
  }
  .reflex-col-lg-4 {
    width: 33.33333333333333%;
    *width: 33.23333333333333%;
  }
  .reflex-col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .reflex-col-lg-2 {
    width: 16.666666666666664%;
    *width: 16.566666666666663%;
  }
  .reflex-col-lg-1 {
    width: 8.333333333333332%;
    *width: 8.233333333333333%;
  }
}
.reflex-wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.reflex-wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.reflex-direction-row-reverse {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.reflex-direction-column {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.reflex-direction-column-reverse {
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.reflex-align-start {
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.reflex-align-end {
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.reflex-align-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-center {
  -webkit-align-items: center;
  align-items: center;
}
.reflex-align-center [class*="reflex-col-"] {
  vertical-align: middle;
}
.reflex-align-baseline {
  -webkit-align-items: baseline;
  align-items: baseline;
}
.reflex-align-baseline [class*="reflex-col-"] {
  vertical-align: baseline;
}
.reflex-align-content-start {
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.reflex-align-content-end {
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.reflex-align-content-end [class*="reflex-col-"] {
  vertical-align: bottom;
}
.reflex-align-content-center {
  -webkit-align-content: center;
  align-content: center;
}
.reflex-align-content-space-between {
  -webkit-align-content: space-between;
  align-content: space-between;
}
.reflex-align-content-space-around {
  -webkit-align-content: space-around;
  align-content: space-around;
}
.reflex-align-self-stretch {
  -webkit-align-self: stretch;
  align-self: stretch;
}
.reflex-align-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.reflex-align-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.reflex-align-self-center {
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.reflex-align-self-baseline {
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}
.reflex-justify-start {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.reflex-justify-end {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.reflex-justify-center {
  text-align: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.reflex-justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.reflex-justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.reflex-item-margin-sm {
  margin: 0 0.25em 0.5em;
}
.reflex-item-margin-md {
  margin: 0 0.5em 1em;
}
.reflex-item-margin-lg {
  margin: 0 1em 2em;
}
.reflex-item-content-margin-sm * {
  margin-right: 0.25em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-md * {
  margin-right: 0.5em;
  margin-left: 0.25em;
}
.reflex-item-content-margin-lg * {
  margin-right: 1em;
  margin-left: 1em;
}
.reflex-img {
  display: inline-block;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  *display: inline;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.reflex-item-footer {
  margin-top: auto;
  margin-left: 0;
  margin-right: 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reflex-container reflex-wrap">
  <div class="reflex-col-xs-12 reflex-col-sm-4 panel" style="background-color: red">
  some content
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: yellow">
  kittenz
  <img src="http://upload.wikimedia.org/wikipedia/en/1/13/Matrona.jpg">
  </div>
  <div class="reflex-col-xs-6 reflex-col-sm-4 panel" style="background-color: blue">
  some more content
  </div>
</div>

@ByteHamster 2015-05-04 15:57:14

Welcome to Stack Overflow! While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. See How do I write a good answer.

@globalSchmidt 2013-11-19 17:47:55

You only show one row so your use case may be limited to just that. Just in case you have multiple rows, this plugin - github Javascript-grids - works perfectly! It makes each panel expand to the tallest panel, giving each row potentially a different height based on the tallest panel in that row. It's a jquery solution vs. css, but wanted to recommend it as an alternative approach.

@Artur Kędzior 2016-10-27 21:21:55

The only solution that really works and it doesn't break responsiveness

@niico 2016-11-03 23:26:22

Does this allow you to specify that the columns should be square - or just all the same height?

@globalSchmidt 2016-11-04 13:46:25

@niico 14 - its been awhile since I've used this, but in my application the requirement is that the elements in each row were the same height, but the height might vary from row to row. Since the height is a function of the elements in the row, if your element height is equal to their width, then they should present as squares.

@Alexander S. 2015-04-29 14:34:27

here is my solution (compiled CSS):

.row.row-xs-eq {
  display: table;
  table-layout: fixed;
  margin: 0;
}

.row.row-xs-eq::before {
  content: none;
}

.row.row-xs-eq::after {
  content: none;
}

.row.row-xs-eq > [class^='col-'] {
  display: table-cell;
  float: none;
  padding: 0;
}

@media (min-width: 768px) {
  .row.row-sm-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-sm-eq::before {
    content: none;
  }

  .row.row-sm-eq::after {
    content: none;
  }

  .row.row-sm-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .row.row-md-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-md-eq::before {
    content: none;
  }

  .row.row-md-eq::after {
    content: none;
  }

  .row.row-md-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .row.row-lg-eq {
    display: table;
    table-layout: fixed;
    margin: 0;
  }

  .row.row-lg-eq::before {
    content: none;
  }

  .row.row-lg-eq::after {
    content: none;
  }

  .row.row-lg-eq > [class^='col-'] {
    display: table-cell;
    float: none;
    padding: 0;
  }
}

So your code would look like:

<div class="row row-sm-eq">
  <!-- your old cols definition here -->
</div>

Basically this is the same system you use with .col-* classes with that difference you need to apply .row-* classes to the row itself.

With .row-sm-eq columns will be stacked on XS screens. If you don't need them to be stacked on any screens you can use .row-xs-eq.

The SASS version that we do actually use:

.row {
  @mixin row-eq-height {
    display: table;
    table-layout: fixed;
    margin: 0;

    &::before {
      content: none;
    }

    &::after {
      content: none;
    }

    > [class^='col-'] {
      display: table-cell;
      float: none;
      padding: 0;
    }
  }

  &.row-xs-eq {
    @include row-eq-height;
  }

  @media (min-width: $screen-sm-min) {
    &.row-sm-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-md-min) {
    &.row-md-eq {
      @include row-eq-height;
    }
  }

  @media (min-width: $screen-lg-min) {
    &.row-lg-eq {
      @include row-eq-height;
    }
  }
}

Live demo


Note: mixing .col-xs-12 and .col-xs-6 inside a single row would not work properly.

@max 2017-12-08 16:43:51

This is good. My solution is the same. And there is a possibility to have equal height columns with standard Bootstrap's 30px gaps between columns using border-spacing and negative margins.

Related Questions

Sponsored Content

32 Answered Questions

[SOLVED] Center a column using Twitter Bootstrap 3

22 Answered Questions

[SOLVED] Make the cursor a hand when a user hovers over a list item

  • 2010-06-21 19:45:44
  • user246114
  • 1724710 View
  • 1737 Score
  • 22 Answer
  • Tags:   css

27 Answered Questions

[SOLVED] How do I make a placeholder for a 'select' box?

41 Answered Questions

45 Answered Questions

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

31 Answered Questions

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

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

31 Answered Questions

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

  • 2009-10-15 21:18:43
  • mike
  • 1695377 View
  • 1869 Score
  • 31 Answer
  • Tags:   html css css3 height

34 Answered Questions

[SOLVED] How to make div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1234518 View
  • 1819 Score
  • 34 Answer
  • Tags:   html css width

1 Answered Questions

Bootstrap Columns Scale

1 Answered Questions

[SOLVED] Dynamically changing background color in bootstrap

Sponsored Content