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

consider 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 image around 100px in height , rest less. how supposed set them equal height without setting hard coded valued height property on of them?

the columns should able have absolute positioned elements inside them , still equal height rest of columns.

i tried writing script this, however, no matter did height of columns never got correct value. script looks 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, script seems pick lowest height , apply height .cols.

why isn't working way should be? , isn't there better way doing this?

if possible, there pure css way of obtaining behavior? preferably without using table-like css rules.

you can find answer question in questions answered in stackoverflow:

twitter bootstrap 3 - panels of equal height in fluid row

or here:

how can make bootstrap columns same height?