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

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?

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/

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/

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>