[CSS] Make equal-height Bootstrap columns and vertically align content with Flexbox

Task description

Table of Contents hide

1. Task description

2. How to do it

2.1. Create a CSS class for the equal-height columns

2.2. Brief intro about Flexbox

3. Code

Make columns in a row from Bootstrap to have equal height no matter how much content is inside.
Make a CSS class so that this equal-height element can be reuse throughout the project on different rows.
Center the content in the columns vertically.

How to do it

Create a CSS class for the equal-height columns

Let’s call our class .equal-height-row, and it should be applied to a row in which the columns should be of equal height. Using Flexbox, it is quite simple to do.

Brief intro about Flexbox

What is Flexbox and why use it?

So earlier front-end people have difficulties in structuring a page layout with pure CSS. The most common method is using tables or float but it is not the optimal way to do it. Basically Flexbox is a CSS layout module to help better and easier positioning the element within a webpage with ease.

Which browser supports Flexbox?

Most common browsers such as Firefox, Chrome, Opera, Safari, etc. supports Flexbox. Internet Explorer 9 and below does not.

How to use Flexbox?

In this post I’ll show you how to use Flexbox to make the columns of equal height and vertically center it. But for further understanding, check this guide.

Code

Please notice that the columns will collapse at sm breakpoint (576px), so if you see the JSFiddle result, make sure you have correct view size to see them line up in one row.

Result: see in JSFiddle.