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

Table of contents

1. Task description
2. How to do it
1. 2.1. Create a CSS class for the equal-height columns
2. 2.2. Vertically align content in the columns
3. Put everything on
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:

<section>
  <div class="container">
    <div class="row equal-height-row">
      <div class="col-md-4">
        <div class="card">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
      <div class="col-md-4">
         <div class="card">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </div>
      </div> 
       <div class="col-md-4">
         <div class="card">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
      </div>
    </div>
  </div>
</section>

Using CSS

.row.equal-height-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap; /* We don't want all columns to be in 1 line though, they can break into new lines if there is not enough space to show all. */
}
.row.equal-height-row > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  padding: 0.5rem; /* prevent the columns to overlap each other */
} 
.row.equal-height-row > [class*='col-'] > .card {
  padding: 1rem;
}
@media (min-width: 576px) {
/* We only need the columns to be equal on desktop devices, for mobile devices columns will break so no matter */
.row.equal-height-row > [class*='col-'] > .card {
    height: 100%;
  }
}

Using SASS

Put on the placeholders:

%flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

%flex-wrap {
  @extend %flexbox;
  flex-wrap: wrap;
}

%flex-column {
  @extend %flexbox;
  flex-direction: column;
}

// This placeholder should be on a row
%equal-height-column {
  @extend %flex-wrap;
  & > [class*='col-'] {
    @extend %flex-column;
    padding: 1rem;
    @media (min-width: 576px) {
      & > .card {
        /* We only need the columns to be equal on desktop devices, for mobile devices columns will break so no matter */
        height: 100%;
      }
    }
  }
}

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

.row.equal-height-row {
  @extend %equal-height-column;
}

2.2. Vertically align content in the columns

Using CSS

First, add this to the CSS stylesheet:

.v-center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -ms-flex-flow: column;
      flex-flow: column;
}

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

<div class="col-md-4">
    <div class="card v-center">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
</div>

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:

.v-center {
  @extend %flexbox;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -ms-flex-flow: column;
      flex-flow: column;
}

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

// This placeholder should be on a row
%equal-height-column {
  @extend %flex-wrap;
  & > [class*='col-'] {
    @extend %flex-column;
    padding: 1rem;
    @media (min-width: 576px) {
      & > .card {
        @extend .v.center;
        height: 100%;
      }
    }
  }
}

.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

.row.equal-height-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}
.row.equal-height-row > [class*='col-'] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
} 
.row.equal-height-row > [class*='col-'] > .card {
  padding: 1rem;
}
@media (min-width: 576px) {
.row.equal-height-row > [class*='col-'] > .card {
    height: 100%;
  }
}
.v-center {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -ms-flex-flow: column;
      flex-flow: column;
}

HTML for CSS:

<section>
  <div class="container">
    <div class="row equal-height-row">
      <div class="col-md-4">
        <div class="card v-center">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
      </div>
      <div class="col-md-4">
         <div class="card v-center">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         </div>
      </div> 
       <div class="col-md-4">
         <div class="card v-center">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
      </div>
    </div>
  </div>
</section>

SASS

SASS does not require any change in the original HTML.

%flexbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

%flex-wrap {
  @extend %flexbox;
  flex-wrap: wrap;
}

%flex-column {
  @extend %flexbox;
  flex-direction: column;
}

.v-center {
  @extend %flexbox;
  -webkit-box-pack:center;
      -ms-flex-pack:center;
          justify-content:center;
  -ms-flex-flow: column;
      flex-flow: column;
}

// This placeholder should be on a row
%equal-height-column {
  @extend %flex-wrap;
  & > [class*='col-'] {
    @extend %flex-column;
    padding: 1rem;
    @media (min-width: 576px) {
      & > .card {
        @extend .v.center;
        height: 100%;
      }
    }
  }
}

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.

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

1. Task description

2. How to do it

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

Brief intro about Flexbox

Using CSS

Using SASS

2.2. Vertically align content in the columns

Using CSS

Using SASS

3. Put everything on

CSS

SASS

4. The result

Recent posts

5 Ways to Migrate WordPress Sites

[WordPress] Difference between die() and wp_die()

Installing Revisr on Amazon LightSail WordPress Instances That Deployed With GitHub

1. Task description

2. How to do it

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

Brief intro about Flexbox

Using CSS

Using SASS

2.2. Vertically align content in the columns

Using CSS

Using SASS

3. Put everything on

CSS

SASS

4. The result

Recent posts

Reader Interactions

Leave a Reply Cancel reply