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

Question

Are there any helpers in bootstrap 2.0 to make .span1, .span2 ..... span12 equal height. I have nested this html type

<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 be, if possible, the same height?

Answer 1

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

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

You can see that it works on jsFiddle

Edit

In answer to the question, here is an option if you need equal heights or columns with the same height with rounded corners: http://jsfiddle.net/panchroma/4Pyhj/

Edit

In answer to the question, here is the method in Bootstrap 3, the same principle, just updates the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

Try something like this (not very elegant):

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

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

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

Answer 3

The jQuery 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 line 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/3189603/ )

Answer 4

Turning around the answers already provided, I just solved it using jquery and underscore . The following snippet aligns the height of my wells and the warnings that appear on this line, regardless of where the highest one is:

 $('.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 the jQuery max custom 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 inner column element, content-container is a wrapper containing 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 work until you add beautiful bootstrap buttons! How do you position the buttons that I thought (yes, that was my problem).

I combined CSS with a jquery answer from How can I make a floating DIV match the height of another floating DIV?

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

Feel free to fix CSS line line 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 2-column solution (adapt this to more columns, just add more conditions). Fire the load event to have the correct height 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>