How to Quickly Build Layouts With Bootstrap 4’s Responsive Flexbox Utilities

In this tutorial I’ll show you how to quickly build layouts with Bootstraps 4’s responsive flexbox utilities. To gain a better understanding of these utilities, we’ll examine four different examples.

Note: this tutorial assumes you’re familiar with Bootstrap 4 as well as flexbox. Take a look at these courses to get you going in the right direction.

Introducing Bootstrap 4’s Responsive Breakpoints

Before we go through our examples, let’s first have a look at Bootstrap’s media queries. The framework defines five pixel-based breakpoints for grid columns, which are shown in the following table:

Screen	Viewport Size	Class prefix
Extra small	< 576px	.col-*
Small	≥ 576px	.col-sm-*
Medium	≥ 768px	.col-md-*
Large	≥ 992px	.col-lg-*
Extra large	≥ 1200px	.col-xl-*

Example #1

Down to business! In the first example, our goal is to horizontally and vertically center the contents inside a section, like this:

1. The Markup

Here’s our HTML:

<section class="d-flex text-center">
  <div class="container d-flex justify-content-center">
    <div class="row align-items-center justify-content-center">
      <div class="col-10">...</div>
    </div>
  </div>
</section>

Notice that we’ve used a number of Bootstrap’s flexbox-related classes. For instance, we denote that the section element is a flex container by giving it the d-flex class. In addition, to center the contents of the .row element (which is by default a flex container) in both directions, we use the align-items-center and justify-content-center classes. 

2. The CSS

Here’s the associated CSS:

section {
  min-height: 70vh;
  background-color: rgba(86,61,124,.15);
}

And the Codepen demo:

Example #2

In the second example, our goal is to build the following layout with blocks containing text aligned to the bottom and top of each one.

This is the desired layout for large screens (when viewport width ≥ 1200px). Check the demo and resize the browser window to see how the layout changes at narrower screen sizes.

1. The HTML

We start with this typical Bootstrap markup:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-8">...</div>
    <div class="col-12 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4">...</div>
  </div>
</div>

Initially we’ll focus on the markup that sets the layout for the columns’ content. Inside each of our columns, we add the following markup:

<a class="d-flex flex-column align-items-end justify-content-between p-3 block" href="">
  <div class="label">...</div>
  <div class="description">...</div>
</a>

Again, in the code above we’ve used a number of Bootstrap’s built-in flexbox-related classes:

• d-flex: to create a flex container, transforming direct children elements into flex items
• flex-column: to set a vertical direction
• align-items-end: to align flex items to the end of the (in this case because of the column direction) x-axis
• justify-content-between: to justify the items with equal spacing between

2. The CSS

The CSS needed for our layout:

body {
  margin-top: 30px;
}

a,
a:hover {
  color: #212529;
}

a:hover {
  text-decoration: none;
}

.block {
  height: 350px;
  background: rgba(86,61,124,.15);
  margin-bottom: 30px;
}

.label {
  font-size: .85rem;
  font-weight: bold;
}

The Codepen demo:

Bonus

Just for practice let’s take a minute and think about two alternative flexbox ways to achieve the same layout for the columns’ content.

First, we remove the justify-content-between class from the link and add the mb-auto class to the element with the class of .label. Alternatively, we could have modified the .description element by giving it the class of mt-auto.

The updated HTML:

<!-- old markup
<a class="d-flex flex-column align-items-end justify-content-between p-3 block" href="">
  <div class="label">...</div>
  <div class="description">...</div>
</a>-->

<a class="d-flex flex-column align-items-end p-3 block" href="">
  <div class="label mb-auto">...</div>
  <div class="description">...</div>
</a>

Now, let’s check again the demo:

The result looks the same, right?

For a second attempt, we could replace some lines of our markup with this new code:

<!-- old markup
<a class="d-flex flex-column align-items-end justify-content-end p-3 block" href="">
  <div class="label">...</div>
  <div class="description">...</div>
</a>-->

<a class="d-flex flex-wrap justify-content-end p-3 block" href="">
  <div class="label w-100 text-right">...</div>
  <div class="description align-self-end">...</div>
</a>

At this point we check the updated demo:

Once again the generated layout is exactly what we want!

Example #3

In the third example, we’ll start with a layout similar to the previous example. Our goal this time is to manipulate the order of the third and fourth columns depending on the viewport size.

When the viewport is at least 1200px wide, the columns’ order should be the following:

In any other case, the columns’ order changes; the third element should come after the fourth one:

1. The HTML

The markup that defines the grid layout:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-8">...</div>
    <div class="col-12 col-md-6 col-xl-4 order-4 order-xl-3">...</div>
    <div class="col-12 col-xl-4 order-3 order-xl-4">...</div>
    <div class="col-12 col-md-6 col-xl-4 order-5">...</div>
  </div>
</div>

Notice the order-* classes which appear in the third, fourth, and fifth columns.

Keep in mind that even if we want to change the order of the third and fourth columns, we also have to specify the order for the fifth column. If we don’t do this, the last column will always follow the second one.

Inside each of the columns, we center the content in both directions with the following familiar utility classes:

<div class="d-flex align-items-center justify-content-center h2 block">
 <!-- centered content here --> 
</div>

2. The CSS

Here’s the associated CSS:

body {
  margin-top: 30px;
}

.block {
  height: 250px;
  color: #212529;
  background: rgba(86,61,124,.15);
  margin-bottom: 30px;
}

And, of course, the Codepen demo:

Example #4

In the last example, our goal is to build a responsive header.

When the browser window is at least 768px wide, the header should look like this:

On smaller screens, its layout changes as follows:

To see the menu, we click on the button located at the right corner.

1. The HTML

Our HTML looks like this:

<nav class="nav-top p-3">
  <div class="container-fluid d-flex align-items-center no-padding">
    <h2 class="logo">LOGO</h2>
    <ul class="d-flex list-unstyled list list-top">...</ul>
    <ul class="d-flex list-unstyled list ml-auto">...</ul>
    <button class="toggle-menu ml-2 d-md-none" aria-label="Responsive Navigation Menu">
      <img src="http://webdesign.tutsplus.com/IMG_SRC" alt="">
    </button>
  </div>
</nav>

In this case we use a combination of custom classes along with Bootstrap’s classes. 

Thanks to the ml-auto class we move the second list to the right corner of the parent container.

2. The CSS

A part of the required CSS is shown below:

.nav-top {
  background: rgba(86, 61, 124, 0.15);
}

.container-fluid {
  max-width: 1200px;
}

.list-top {
  margin-left: 50px;
}

.list li:not(:last-child) {
  margin-right: 15px;
}

.list li a {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.2s;
}

.list li a:hover {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
}

@media screen and (max-width: 767px) {
  .list-top {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    transform: translateX(-100%);
    margin-left: 0;
    padding: 1rem;
    transition: transform 0.3s;
  }

  .nav-top.is-active .list-top {
    transform: none;
  }
  
  .list-top li {
    flex-grow: 1;
  }
}

3. The JavaScript

Here’s the JavaScript responsible for toggling the visibility of the mobile menu:

const toggleMenu = document.querySelector(".toggle-menu");
const navTop = document.querySelector(".nav-top");

toggleMenu.addEventListener("click", () => {
  navTop.classList.toggle("is-active");
});

And the final demo:

Conclusion

In this in-depth tutorial, we covered four real-world examples that take advantage of Bootstrap 4’s responsive flexbox utilities. I hope you enjoyed what we built here and they’ve motivated you to apply what you’ve learned in your upcoming Bootstrap projects.

As always, if you have any questions, let me know in the comments below.

Useful Links