Make columns the same height in bootstrap

Question

I have three columns inside a row. I want all three columns to have the same height (fill the entire white space out)

Currently, it looks like this:

enter image description here

As you can see, the left column is the correct height. Where the middle and the right aren't.

The scaffolding of it looks like this:

<div class="container">
 <div class="row">
 <div class="span3">
 -- menu --
 </div>
 <div class="span5">
 -- gray content --
 </div>
 <div class="span3">
 -- black content--
 </div>
 </div>
</div>

I've tried to give the middle and the right span height of 100%, but that doesn't do it. Can anybody guide me in the correct direction?

I am using the latest version of Twitter Bootstrap

• Mateusz: You're missing > in the end of first tag - <div class="container".
• Bojangles: "The latest version of Twitter Bootstrap" is slightly ambiguous at the moment - do you mean the stable 2.3.2, or the 3.0.0-RC2 branch?
• Itay: Do you know which of the columns is the longest?
• oliverbj: @ItayItai Yes, the --menu-- (span3) is longest.
• Itay: If you know the menu is always the longest, see my edited answer.

Answer 1

I found this solution for bootstrap 3 which works great for me

http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

It uses these styles:

/* columns of same height styles */
.container-xs-height {
 display:table;
 padding-left:0px;
 padding-right:0px;
}
.row-xs-height {
 display:table-row;
}
.col-xs-height {
 display:table-cell;
 float:none;
}
@media (min-width: 768px) {
 .container-sm-height {
 display:table;
 padding-left:0px;
 padding-right:0px;
 }
 .row-sm-height {
 display:table-row;
 }
 .col-sm-height {
 display:table-cell;
 float:none;
 }
}
@media (min-width: 992px) {
 .container-md-height {
 display:table;
 padding-left:0px;
 padding-right:0px;
 }
 .row-md-height {
 display:table-row;
 }
 .col-md-height {
 display:table-cell;
 float:none;
 }
}
@media (min-width: 1200px) {
 .container-lg-height {
 display:table;
 padding-left:0px;
 padding-right:0px;
 }
 .row-lg-height {
 display:table-row;
 }
 .col-lg-height {
 display:table-cell;
 float:none;
 }
}
/* vertical alignment styles */
.col-top {
 vertical-align:top;
}
.col-middle {
 vertical-align:middle;
}
.col-bottom {
 vertical-align:bottom;
}

And this markup

<div class="container container-xs-height">
 <div class="row row-xs-height">
 <div class="col-xs-6 col-xs-height"></div>
 <div class="col-xs-3 col-xs-height col-top"></div>
 <div class="col-xs-2 col-xs-height col-middle"></div>
 <div class="col-xs-1 col-xs-height col-bottom"></div>
 </div>
</div>

• Thilak Rao: Thanks for posting Bootstrap specific solution. This one seems to be the best so far.
• Ignacio Soler Garcia: Agree, this solution seems the best one for me.
• Maurizio Pozzobon: @alex in what context?

Answer 2

You can solve this without JS. Just use

bottom: 0;
top: 0;
position: absolute; /* The container must have position: relative */

It does magic :)

An example I've made: http://fiddle.jshell.net/E8SK6/1

Result: http://fiddle.jshell.net/E8SK6/1/show/

Edit:

Since you said on a comment that the menu is always the biggest, you can use this new example: http://fiddle.jshell.net/E8SK6/5/

If you don't know which one of them is the longest, maybe the answer on this thread is better. It uses display: table-cell. Here's the example

• oliverbj: The position is set to absolute, though in your comments you write it must be set ti relative. What should I use? :-)
• Itay: The inner positions are absolute but the wrapper element is relative

Answer 3

Ah this is an age old issue.

If you set 100% height on an element, it's parent needs a set height for it to go off. Since the div.row has a fluid height, that won't work.

The way around this would be:

Set a fixed height on the div.row (probably not a good idea if you want a fluid design)

or

Use jQuery to do it:

HTML

<div class="row equalHeight">
 <div class="span3">
 -- menu --
 </div>
 <div class="span5">
 -- gray content --
 </div>
 <div class="span3">
 -- black content--
 </div>
</div>

jQuery

$('.equalHeight').each(function() {
 var eHeight = $(this).innerHeight();
 $(this).find('div').outerHeight(eHeight);
});

Answer 4

Today, is possible with row-eq-height

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

• contactmatt: As a note, this uses flexbox, which isn't support in IE9 or below.