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

Solution 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/

Solution 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/

Solution 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)

Solution 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();
});

Solution 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();