website creator Update: I made javascript code for making equal height for blocks without jQuery dependency.
Set same height for columns using jQuery:
jQuery code:
var equal_height = function () {
jQuery('.js-equal-height-wrap').each(function () {
var highest_item = 0;
jQuery('.js-equal-height-item', this).each(function () {
jQuery(this).css('height', 'auto'); // clear height attr
if (jQuery(this).height() > highest_item) { // get height of the highest item
highest_item = jQuery(this).height();
}
});
jQuery('.js-equal-height-item', this).height(highest_item); // set max height for every item
});
}
jQuery(function ($) { // wait while jQuery loads (document-ready)
equal_height();
});
jQuery(window).resize(function ($) {
equal_height();
});
// wait until all fonts are loaded
setTimeout(function () {
equal_height();
}, 500);
setTimeout(function () {
equal_height();
}, 1000);
setTimeout(function () {
equal_height();
}, 2000);
html markup:
<div class="row js-equal-height-wrap">
<div class="col-xs-4">
<div class="well js-equal-height-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque ut arcu vel sagittis. Pellentesque ut dolor et tellus malesuada pulvinar quis sed tellus. Morbi tortor lacus, volutpat at ipsum vitae, fringilla pretium tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus quis bibendum ligula. Suspendisse et sodales orci. Duis ut sem sollicitudin, vehicula diam eu, sagittis elit. Quisque id neque accumsan, finibus arcu eu, finibus lacus.</div>
</div>
<div class="col-xs-4">
<div class="well js-equal-height-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="col-xs-4">
<div class="well js-equal-height-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque ut arcu vel sagittis. Pellentesque ut dolor et tellus malesuada pulvinar quis sed tellus. Morbi tortor lacus, volutpat at ipsum vitae, fringilla pretium tortor.</div>
</div>
</div>