Is there a way to make all elements in a row class the same height?

Question

In Bootstrap, is there an easy way to make all the span elements in a row the same height, i.e. the height of the tallest element?

Here's an example of what I mean.

http://jsfiddle.net/DVnZ6/

Answer 1

You can do it using jQuery:

boxes = $('.well');
maxHeight = Math.max.apply(
  Math, boxes.map(function() {
    return $(this).height();
}).get());
boxes.height(maxHeight);

Here's an example: http://jsfiddle.net/DVnZ6/3/

Answer 2

The resize event would have to be added to this code since the height of the content in most cases varies on different resolutions and that produces unwanted design problems like overflowed text.

Here's an more complete version of the code that supports resizing as well

jQuery(function () {

    equalMaxWidth = 500; /* Customize viewport width - for resolutions below this number, the height equalizing will not work */
    boxes = jQuery('.well');

    boxes.removeAttr('style');
    if(jQuery(window).width() > equalMaxWidth){
        equalBoxHeights(boxes);
    };

    window.onresize = function () {
        boxes.removeAttr('style');
        console.log( jQuery(window).width());
        if(jQuery(window).width() > equalMaxWidth){
            equalBoxHeights(boxes);
        };
    };
});

function equalBoxHeights(boxes) {
    maxHeight = Math.max.apply(
            Math, boxes.map(function () {
                return jQuery(this).height();
            }).get());
    boxes.height(maxHeight);
}

Check the demo on jsFiddle http://jsfiddle.net/o4w7tjtz/

Tip: try resizing the 3rd vertical frame (noticed equal heights on around 500pw width ?)

Answer 3

If you set the height of the spans to 100% and set the height of the row to a fixed value, they will all match the height of the container.

Of course, you would have to know the expected height of the columns, but it is a js free solution.