Task description
- 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
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.
Most common browsers such as Firefox, Chrome, Opera, Safari, etc. supports Flexbox. Internet Explorer 9 and below does not.
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.