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

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, the HTML:

Using CSS

Using SASS

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

Using CSS

First, add this to the CSS stylesheet:

Then apply it on our HTML page template, all .card divs., for example:

Using SASS

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

CSS

HTML for CSS:

SASS

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.