"equal height"
Bootstrap 3.0.3 Snippet by darkzodd

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row height-example"> <div class="col-md-3 odd"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. </div> </div> <div class="col-md-3 even"> <div class="panel-body"> Cras ultricies ligula sed magna dictum porta. Cras ultricies ligula sed magna dictum porta. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. </div> </div> <div class="col-md-3 odd"> <div class="panel-body"> Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. </div> </div> <div class="col-md-3 even"> <div class="panel-body"> Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. </div> </div> <div class="col-md-3 even"> <div class="panel-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. </div> </div> <div class="col-md-3 odd"> <div class="panel-body"> Nulla porttitor accumsan tincidunt. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Proin eget tortor risus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Pellentesque in ipsum id orci porta dapibus. </div> </div> <div class="col-md-3 even"> <div class="panel-body"> Donec sollicitudin molestie malesuada. Nulla quis lorem ut libero malesuada feugiat. </div> </div> <div class="col-md-3 odd"> <div class="panel-body"> Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. </div> </div> </div> </div> <script> jQuery(function($) { $('.height-example').equalize(); }); </script>
.even { background-color: black; color: #fff} .odd { background-color: yellow} /*remove equalize for mobile*/ @media only screen and (max-width: 767px) { .even,.odd { height: auto !important;} }
/** * equalize.js * Author & copyright (c) 2012: Tim Svensen * Dual MIT & GPL license * * Page: http://tsvensen.github.com/equalize.js * Repo: https://github.com/tsvensen/equalize.js/ * * The jQuery plugin for equalizing the height or width of elements. * * Equalize will accept any of the jQuery Dimension methods: * height, outerHeight, innerHeight, * width, outerWidth, innerWidth. * * EXAMPLE * $('.parent').equalize(); // defaults to 'height' * $('.parent').equalize('width'); // equalize the widths * * ADVANCED EXAMPLES * Get the minimum max dimension by removing the existing height/width * $('.parent').equalize({reset: true}); // equalize height by default, remove existing height, then determin max * $('.parent').equalize({equalize: 'width', reset: true}); // equalize width, remove existing width, then determin max * * Equalize internal child elements * From @larsbo : http://jsfiddle.net/4QTNP/3/ * $('.parent').equalize({children: 'p'}); // equalize height of paragraphs within .parent */ ;(function($) { $.fn.equalize = function(options) { var $containers = this, // this is the jQuery object children = false, reset = false, equalize, type; // when options are an object if ($.isPlainObject(options)) { equalize = options.equalize || 'height'; children = options.children || false; reset = options.reset || false; } else { // otherwise, a string was passed in or default to height equalize = options || 'height'; } if (!$.isFunction($.fn[equalize])) { return false; } // determine if the height or width is being equalized type = (equalize.indexOf('eight') > 0) ? 'height' : 'width'; return $containers.each(function() { // when children exist, equalize the passed in child elements, otherwise equalize the children var $children = (children) ? $(this).find(children) : $(this).children(), max = 0; // reset for each container $children.each(function() { var $element = $(this), value; if (reset) { $element.css(type, ''); } // remove existing height/width dimension value = $element[equalize](); // call height(), outerHeight(), etc. if (value > max) { max = value; } // update max }); $children.css(type, max +'px'); // add CSS to children }); }; }(jQuery));

Related: See More


Questions / Comments: