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="row">
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam iaculis sem non mollis fermentum. Morbi pellentesque.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam.</p>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec.</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;
}
.portfolio-item > div {
height: 100%;
background: #eaeaea;
padding: 10px;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
/*
* Gather all the elements with a "portfolio-item" class to a nodelist
* See https://developer.mozilla.org/en/docs/Web/API/NodeList
*/
var columnsNodeList = document.querySelectorAll('.portfolio-item');
/*
* Transform the nodelist to an array, so we can operate with array methods
* such as .forEach()
* (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
*/
var columnsArray = [].slice.call(columnsNodeList);
var maxHeight = 0;
// Find the biggest height between the columns
columnsArray.forEach(function(column) {
var columnHeight = column.offsetHeight;
if (columnHeight > maxHeight) {
maxHeight = columnHeight;
}
});
// Apply the biggest height to all columns
columnsArray.forEach(function(column) {
column.style.height = maxHeight + 'px';
});