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:

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

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>

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

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/