Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="item col-xs-4 row-num-1">
<div>
<p>
this is text this is text this is text this is text this is text this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-1">
<div>
<p>
this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-1">
<div>
<p>
this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-2">
<div>
<p>
this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-2">
<div>
<p>
this is text this is text this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-2">
<div>
<p>
this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-3">
<div>
<p>
this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-3">
<div>
<p>
this is text
</p>
</div>
</div>
<div class="item col-xs-4 row-num-3">
<div>
<p>
this is text this is text this is text this is text this is text this is text
</p>
</div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.item {
margin-bottom: 10px;
}
.item div {
background: grey;
height: 100%;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
var totalFrames = $('div[class*=row-num-]').length;
for ( var i = 1, l = totalFrames; i < l; i++ ) {
var heights = $(".row-num-"+i).map(function() {
return $(this).height();
}).get(),
maxHeight = Math.max.apply(null, heights);
$(".row-num-"+i).height(maxHeight);
}