Bootstrap Tip: How to make equal height columns
Bootstrap 03-Sep-2019

Bootstrap Tip: How to make equal height columns

There is no doubt that Twitter Bootstrap is the most famous front-end framework nowadays. It’s used by millions of developers. Though, it has limitations and you need to do workarounds to overcome it.

One problem that faces a great number of web designers comes up when have different columns with different size of content which results in having columns with unequal heights. There is no straightforward way to overcome this. There are two ways to do it. First, using CSS. And the other is a jQuery solution.

First, let’s assume that we have a row with the following structure.

<div class=”row”>
<div class=”col–md–4”>
<p> paragraph1</p>
<p> paragraph2</p>
<p> paragraph3</p>
</div>
<div class=”col–md–4”>
<p> paragraph1</p>
<p> paragraph2</p>
</div>
<div class=”col–md–4”>
<p> paragraph1</p>
</div>
</div>

This will of course result in 3 columns with different heights. If you have a background color for them, this will really look ugly and unprofessional.

First, you can use this CSS3 based solution. Please not that it will only work with modern browsers.

By adding the class “equal” to the div row, and adding the following class to your css, you can achieve what you the equally hrighted columns.

.equal, .equal > div[class*=‘col-‘] {
display: –webkit–box;
display: –moz–box;
display: –ms–flexbox;
display: –webkit–flex;
display: flex;
flex:1 0 auto;
}
 
And the jQuery solution can be done without adding any more css classes. By using the jQuery each loop, the following code will loop the columns, get the biggest height value and give it to all the other columns.
 
$(document).ready(function(){
$(‘.container’).each(function(){
var highestBox = 0;
$(‘.col-md-4 ‘, this).each(function(){
if($(this).height() > highestBox)
highestBox = $(this).height();
});
$(‘.col-md-4 ‘,this).height(highestBox);
});
});?
 
I hope you like this tutorial please comment your bootstrap issues and suggestions below.