• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

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

Modified on: July 4, 2020

Table of contents

  1. 1. Task description
    1. 2. How to do it
      1. 2.1. Create a CSS class for the equal-height columns
        1. 2.2. Vertically align content in the columns
        2. 3. Put everything on
          1. 4. The result

            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

            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.
            You can check for more details here: https://caniuse.com/#feat=flexbox

            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.

            So, the HTML:

            HTML

            Using CSS

            CSS

            Using SASS

            Put on the placeholders:

            Sass

            So each time you want to make the columns in a row with equal height, you can apply this code:

            Sass

            2.2. Vertically align content in the columns

            Using CSS

            First, add this to the CSS stylesheet:

            CSS

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

            HTML

            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:

            Sass

            Then just go ahead and add the .v-center as to be extended inside the .card class.

            Sass

            .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

            CSS

            HTML for CSS:

            HTML

            SASS

            SASS does not require any change in the original HTML.

            Sass

            4. The result

            css set bootstrap columns equal height using flexbox

            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.

            Filed Under: Front-end Tagged With: bootstrap, css, scss

            Recent posts

            WordPress: Create custom post type programmatically

            [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

            Mangools Review: A Productive SEO tool for The Affiliates

            Reader Interactions

            You are here: Home / Front-end / [CSS] Make equal-height Bootstrap columns and vertically align content with Flexbox

            Leave a Reply Cancel reply

            Your email address will not be published. Required fields are marked *

            Primary Sidebar

            Hello! My name is Anh. I am a front-end developer in Oulu, Finland. Currently, I work with PHP, HTML, CSS, JavaScript and love writing about them. Please feel free to join the discussion!

            FOLLOW MY BLOG

            Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.