"equal height"
Bootstrap 3.0.3 Snippet by darkzodd

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
.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;}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* 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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Dashboard
Pricing Table - Equal Height

Questions / Comments: