March 6, 2016 11:44 pm

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.

Bootstrap Tip How to make equal height columns

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.

 

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.

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.

I hope you like this tutorial please comment your bootstrap issues and suggestions below.

Author Amr Abdou

A full-stack web developer, Linux enthusiast, freelance tech writer & open-source supporter. Loves finding quit corners in public places or cafes accompanied by his laptop to try changing the world from there. You can check his latest works at social-evolvea.com or follow him on facebook, twitter, Linkedin or Google+


Tutorial Categories: