Table of contents
1. 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.
2. How to do it
2.1. 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.
You can check for more details here: https://caniuse.com/#feat=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.
So, the HTML:
Put on the placeholders:
So each time you want to make the columns in a row with equal height, you can apply this code:
2.2. Vertically align content in the columns
First, add this to the CSS stylesheet:
Then apply it on our HTML page template, all .card divs., for example:
With SASS, you don’t need to apply the class on the HTML, because the class can be extended inside the CSS. So, the class looks like:
Then just go ahead and add the .v-center as to be extended inside the .card class.
.v-center was written as a helper class rather than a placeholder because then it can be used on other HTML elements as a standalone css class in our page templates also, not just to be extended by other classes.
3. Put everything on
HTML for CSS:
SASS does not require any change in the original HTML.
4. The result
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.