Using twitter bootstrap 2.0 - How to make equal column heights?

Question

Does bootstrap 2.0 have any helpers to make .span1, .span2 .... .span12 equal height. I've nested this type of html

<div class='container'>
 <div class='row'>
 <div class='span2'>
 <div class='well'>
 XXXX
 </div>
 </div>
 <div class='span2'>
 <div class='well'>
 XXXX
 XXXX
 </div>
 </div>
 <div class='span2'>
 <div class='well'>
 XXXX
 XXXX
 XXXX
 </div>
 </div>
 </div>
</div>

I would like each well to end up the same height if possible?

• Michael Benjamin: Simple. Easy. Equal Height Columns with Flexbox.

Answer 1

Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.

.col{
 margin-bottom: -99999px;
 padding-bottom: 99999px;
 background-color:#ffc;
}
.col-wrap{ 
 overflow: hidden; 
}

You can see it working at jsFiddle

Edit

In response to a question, here's a variation if you need equal height wells or equal height columns with rounded corners: http://jsfiddle.net/panchroma/4Pyhj/

Edit

In response to a question, here's the same technique in Bootstrap 3, same principle, just update the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

• Poul K. Sørensen: One drawback, the background is drawed and jsut hidden because of the overflow. Meaning if you render something else then a static color you dont see the bottom border. try it together with call well on each column.
• David Taiaroa: @s093294 , if you want to start a jsFiddle, we might be lucky and be able to find a solution in your specific case.
• Heraldmonkey: I'm pretty sure this solution is based on positioniseverything.net/articles/onetruelayout/…, no?
• Josh M.: Yes, but if you're just letting the inner boxes grow vertically and cutting them off at some arbitrary height, then some boxes may grow past the outer box, cutting off the bottom border. Unless I misunderstood this solution.
• David Taiaroa: hey @HelloWorldNoMore, the large padding bottom extends the shortest column so that it is longer than the content area of the longest column. This will also extend the other columns, but don't worry about that. It will also push down elements after this row, so we add a matching negative margin to offset this. Finally the overflow: hidden is to stop any background colour from extending beyond the bottom the content area of the longest column.

Answer 2

Try something like this (not very elegant, though):

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

The jQuerys height() method returns the highest value when multiple elements are selected.

See the jsFiddle: http://jsfiddle.net/4HxVT/

• Chris Conley: Just tried this but height() actually returns the first element: "Description: Get the current computed height for the first element in the set of matched elements." jsfiddle.net/p4ekd

Answer 3

jQuery's height() method returns the value of the "first element in the set of matched elements". The answer in http://jsfiddle.net/4HxVT/ only works because the first element in the row is also the highest.

Here's another jQuery based solution:

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

(Via this answer: https://stackoverflow.com/a/526316/518535)

Answer 4

Expanding upon the answers already given, I have just solved this using jquery and underscore. The snippet below equalizes the height of my wells and alerts that appear on a given row, regardless of where the tallest one appears:

$('.well, .alert').height(function () {
 var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) {
 return $(elem).height();
 });
 return $(h).height();
});

Answer 5

$.fn.matchHeight = function() {
 var max = 0;
 $(this).each(function(i, e) {
 var height = $(e).height();
 max = height > max ? height : max;
 });
 $(this).height(max);
};
$('.match-height').matchHeight();

Answer 6

I solved this with a custom jQuery max plugin:

$.fn.max = function(selector) { 
 return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); 
}

Here content-box is my internal column element, content-container is the wrapper that contains the columns:

$('.content-box').height(function () {
 var maxHeight = $(this).closest('.content-container').find('.content-box')
 .max( function () {
 return $(this).height();
 });
 return maxHeight;
})

Answer 7

The above solutions all work until you add nice bootstrap buttons! How do you position buttons I thought (yes, that was my problem).

I combined the CSS with the jquery answer from How might I force a floating DIV to match the height of another floating DIV?

After a bit of frigging I got this, which works with CSS although the buttons don't line up, and is fine with jQuery

Feel free to fix the CSS button line up bit :)

jQuery:

$.fn.equalHeights = function (px) {
 $(this).each(function () {
 var currentTallest = 0;
 $(this).children().each(function (i) {
 if ($(this).height() > currentTallest) {
 currentTallest = $(this).height();
 }
 });
 if (!px && Number.prototype.pxToEm) {
 currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
 }
 // for ie6, set height since min-height isn't supported
 if ($.browser.msie && $.browser.version == 6.0) {
 $(this).children().css({
 'height': currentTallest
 });
 }
 $(this).children().css({
 'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only
 });
 });
 return this;
};
$(document).ready(function() {
 var btnstyle = {
 position : 'absolute',
 bottom : '5px',
 left : '10px'
 };
 $('.btn').css(btnstyle);
 var colstyle = {
 marginBottom : '0px',
 paddingBottom : '0px',
 backgroundColor : '#fbf'
 };
 $('.col').css(colstyle); 
 $('.row-fluid').equalHeights();
});

CSS

.col {
 margin-bottom: -99999px;
 padding-bottom: 99999px;
 background-color:#ffb;
 position:relative;
}
.col-wrap {
 overflow: hidden; 
}
.btn{
 margin-left:10px ; 
}
p:last-child {
 margin-bottom:20px ; 
}

jsfiddle - http://jsfiddle.net/brianlmerritt/k8Bkm/

Answer 8

Here is my solution with 2 columns (adapt this to more columns is simple, just add more conditions). Run on the load event to have the correct heights of all elements.

$(window).on('load', function () { 
 var left = $('.left');
 var leftHeight = left.height();
 var right = $('.right');
 var rightHeight = right.height();
 // Width like mobile, the height calculation is not needed
 if ($(window).width() <= 751)
 {
 if (leftHeight > rightHeight) {
 right.css({
 'height': 'auto'
 });
 }
 else {
 left.css({
 'height': 'auto'
 });
 }
 return;
 }
 if (leftHeight > rightHeight) {
 right.css({
 'height': leftHeight
 });
 }
 else {
 left.css({
 'height': rightHeight
 });
 }
});
<div class="row">
 <div class="span4 left"></div>
 <div class="span8 right"></div>
</div>