How to properly set Bootstrap's column classes to equal height

Question

Consider this markup:

<div class="row">
 <div class="col-xs-4">
 <img src="somesource.png">
 </div>
 <div class="col-xs-6">
 <h1>Some text</h1>
 </div>
 <div class="col-xs-2">
 <span class="glyphicon glyphicon-chevron-right"></span>
 </div>
</div>

If the image is around 100px in height and the rest is less. How are you supposed to properly set them to equal height without setting a hard coded valued height property on all of them?

The columns should be able to have absolute positioned elements inside them and still be equal height as the rest of the columns.

I tried writing a script for this, however, no matter what I did the height of the columns never got the correct value. The script looks like this:

var highest = 0,
 columns = $('.row').find('> div[class*="col"]');
$.each(columns, function() {
 var height = $(this).height();
 if (height > highest) {
 highest = height;
 }
});
$.each(columns, function() {
 $(this).css('height', highest + 'px');
});

However, this script seems to pick the lowest height and then apply that height to all the .cols.

Why isn't this working the way it should be? And isn't there a better way than doing it like this?

If possible, is there a pure CSS way of obtaining this behavior? Preferably without using table-like CSS rules.

Answer 1

You can find the answer to that question in questions already answered in StackOverflow:

Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row

Or here:

How can I make Bootstrap columns all the same height?

• Chrillewoodz: Ye I know but they're not really optimal, and none of them seem to deal with having images in the columns. The flex solution would seem the best, I found that having just display: -webkit-box; fixes the issue for chrome and safari but not IE and Firefox. As soon as I add display: flex; it breaks my images by squeezing them together. After looking over the solution I'd probably prefer a JS solution since none of the CSS ones seem to work properly. Which also brings me back to the original problem, why isn't my script working?