Skip to content

Instantly share code, notes, and snippets.

@jamiehs

jamiehs/markup.html

Created Apr 14, 2015
Embed
What would you like to do?
Equal height strategy for Bootstrap columns
<div class="row equal-height">
<div class="hidden-xs equal-height-trigger"></div>
<div class="col-sm-6 col-md-3">
<div class="card">
<div class="inner">
<header>
<h3>Lorem</h3>
</header>
<p>Lorem ipsum Veniam eiusmod sunt velit deserunt ullamco cillum Duis dolore anim nulla Ut pariatur pariatur labore non esse qui proident ad.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card" data-slug="<?php echo $slug; ?>">
<div class="inner">
<header>
<h3>Ipsum</h3>
</header>
<p>Lorem ipsum Commodo aliqua anim quis quis quis esse labore laboris consectetur qui.</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card" data-slug="<?php echo $slug; ?>">
<div class="inner">
<header>
<h3>Foo</h3>
</header>
<p>Lorem ipsum Est in aliquip commodo et ullamco in fugiat aute consectetur elit incididunt deserunt. Lorem ipsum Dolor consequat ea amet eiusmod.</p>
</div>
</div>
</div>
</div>
var Main = {
bindEqualHeight: function(){
var self = this;
$('.equal-height').each(function(){
var group = $(this);
// Run initially
self.equalHeight(group);
// Bound to window resize AND window load.
// Since webfonts change the layout and they dont load
// before DOM Ready, we run this code again on
// window.load to ensure that the equalHeight
// function has one its thing after WebFonts load.
$(window).on('resize.equalheight load.equalheight', function(event){
self.equalHeight(group);
});
});
},
equalHeight: function($container){
var element,
elements,
i,
len,
maxHeight,
trigger,
paddingBottom,
paddingTop;
trigger = $container.find('.equal-height-trigger');
elements = $container.children().not(trigger);
if (trigger.is(':visible')) {
maxHeight = 0;
for (i = 0, len = elements.length; i < len; i++) {
element = elements[i];
maxHeight = Math.max($(element).find('.inner').outerHeight(), maxHeight);
}
elements.height(maxHeight);
} else {
elements.height('auto');
}
},
initialize: function(){
self.bindEqualHeight();
}
};
// DOM Ready
$(function(){
Main.initialize();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.