Day 3: Bootstrap 4 Flex Tutorial and Examples

Day 2: Bootstrap 4 Grid
Day 4: Bootstrap 4 Typography

Hey and welcome to the third day of Bootstrap 4 ☺️ Today we will learn about the Bootstrap 4 Flex. Flexbox is a new layout mode in CSS3. It describes ways to align and size elements. Understanding how the Bootstrap 4 flex works will help you align elements horizontally and vertically (to the left, center and right), size them according to their parent and tell them how to fill a row.

Bootstrap 4 has created classes around the CSS3 properties so you can use them with ease. Today we will go through them and create example scenarios. Aligning and sizing elements are crucial parts of front-end development. It is important to get them right before starting with the Bootstrap 4 elements and components. I have personally skipped the flexbox tutorial when I switched to Bootstrap 4. And I found I needed to learn about it very quickly (one the first day I started creating a webpage actually).

In today’s article we will cover the following:

Bootstrap 4 Flex Container
Bootstrap 4 Flex Items
Bootstrap 4 Flex Responsiveness
Further Reading

Let’s start flexing!

Photo credit to Zach Hink for his shot.

Bootstrap 4 Flex Container

In order to use the flex utilies you need to have a flex container. This is an element with the class .d-flexor .d-inline-flex. You can place a flex container anywhere in the page where you want to align items in a specific way. You can even have it inside another container, or .col, or .card, etc. All the elements inside this container will be turned into Bootstrap 4 flex items. You will see how the items behave in the next section, but for now let’s see how the containers look.

Creating a Bootstrap 4 flex container with .d-flexwill result in an element that takes up the whole width of its parent. And creating a Bootstrap 4 flex container with .d-inline-flex will make its width vary depending on the width of its content. .d-inline-flex will only take up the space it is necessary to display its content.

Here are some Bootstrap 4 flex container examples:

<div class="d-flex">
  I'm a flexbox container.
</div>

<div class="d-inline-flex">
  I'm an inline flexbox container. 
</div>

Bootstrap 4 Flex Items

Direction for Flex Items

When you start placing elements inside the Bootstrap 4 flex container they will align horizontally from left to right as a default behaviour:

<div class="d-flex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Side note: The flex container and items are not coloured. I just added colours so they look nicer in this tutorial.

Aligning items horizontally also has an explicit class called .flex-row. It is better to write it down than leave it implied because it will help you when you look back on your code and also when you adjust it for mobile devices. To have the items align from right to left you need to use the .flex-row-reverse class.

<div class="d-flex flex-row-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

To align the items vertically use the class .flex-column. Here is the result you will get:

<div class="d-flex flex-column">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

And to align the items from down to top, you will need to use the class .flex-column-reverse.

<div class="d-flex flex-column-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Aligning Flex Items on the Main Axis

The main axis is the one you choose to align your items to. It is the horizontal one if you are going with .flex-row and the vertical one if you are going with .flex-column.

Your items have multiple options regarding their starting point and also the distance between them. You can align all your items at the beginning with .justify-content-start, center with .justify-content-center or end of the row/column with .justify-content-end. Or you can choose to evenly space them out with .justify-content-between or .justify-content-around.

<div class="d-flex justify-content-start">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-end">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-center ">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-between">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="d-flex justify-content-around">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Aligning Flex Items on the Secondary Axis

The secondary axis is the vertical one for .flex-rowand the horizontal one for .flex-column. The browser default is to stretch the element for the entire height or width (you can also use the .align-items-stretch to do this). But you can modify this behaviour. You can align the elements to the start with .align-items-start, the end with .align-items-endor center with .align-items-center.

Here are some examples:

<div class="row">
  <div class="col-4">
    <div class="d-flex align-items-start">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex align-items-center">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex align-items-end">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
</div>

Using .align-items-baselinewill align the items along their content’s baseline. I have also added an image with the elements to better understand this alignment. The black line shows where the content for every item ends.

<div class="d-flex align-items-baseline">
  <div><h1>Flex item 1</h1></div>
  <div>Flex item 2</div>
  <div><h4>Flex item 3</h4></div>
</div>

Aligning Individual Flex Items

You can separate an element from the others on the primary axis using auto-margins. There are two classes used for this: .mr-autoand .ml-auto..mr-automakes the element it is used on go as far left as possible (together with the elements before him). And .ml-automakes the element go as far right as possibile.

<div class="row">
    <div class="col-6">
      <div class="d-flex">
        <div>Flex item</div>
        <div>Flex item</div>
        <div class="ml-auto">Flex item</div>
      </div>
    </div>
    <div class="col-6">
      <div class="d-flex">
        <div class="mr-auto">Flex item</div>
        <div>Flex item</div>
        <div>Flex item</div>
      </div>
    </div>
</div>

You can change the alignment on the secondary axis for individual items too. You will need to use classes .align-self-start, .align-self-end, .align-self-center, .align-self-baseline, .align-self-stretchon the individual flexbox item.

Here are some examples:

<div class="row">
  <div class="col-4">
    <div class="d-flex">
      <div>Flex item 1</div>
      <div class="align-self-center">Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex align-items-start">
      <div>Flex item 1</div>
      <div class="align-self-stretch">Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
  
  <div class="col-4">
    <div class="d-flex">
      <div>Flex item 1</div>
      <div class="align-self-end">Flex item 2</div>
      <div>Flex item 3</div>
    </div>
  </div>
</div>

Bootstrap 4 Flex Fill

The width of the Bootstrap 4 flex items is by default the width of their content. Even if there is more than enough space in the container for the items, they won’t grow. Flex wants us to define how much they should grow. There are 2 options for distributing the remaining space when there is additional space:

If you want to make the sibling items divide the width of the container into equal parts, you need to use the .flex-fill class. This approach will make the bootstrap 4 flex items in the container sum up to the width of the container (there will not be any more white space).

<div class="d-flex flex-row">
   <div class="flex-fill">Flex item 1</div>        
   <div class="flex-fill">Flex item 2</div>     
</div>

2. If you want the remaining space to go to certain elements you need to specify to which ones. You can do this by adding the .flex-grow-1to the flexbox item. If there is only one item with the .flex-grow-1class, it will get the whole remaining white space. This means that the other elements will only take the width of their content and the element with the .flex-grow-1all the remaining space.

<div class="d-flex">
  <div class="flex-grow-1">Flex itemn 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

If you have multiple elements with the .flex-grow-1 class the remaining space from the row will be divided equally between them.

<div class="d-flex">
  <div class="flex-grow-1">Flex itemn 1</div>
  <div class="flex-grow-1">Flex item 2</div>
  <div>Flex item 3</div>
</div>

Bootstrap 4 Flex Shrink

When there is not enough space in the flexbox container for the elements inside it, you can specify what items should shrink with the .flex-shrink-1 class. If there is only one element with the .flex-shrink-1 class, that will be the only onw shrinking. If there are multiple elements, they will shrink with the same factor.

<div class="d-flex">
  <div class="flex-shrink-1">Flex item 1</div>
  <div class="w-100">Flex item 2</div>
  <div class="w-100">Flex item 3</div>
</div>

<div class="d-flex panel">
  <div class="flex-shrink-1">Flex item 1</div>
  <div class="flex-shrink-1">Flex item 2</div>
  <div class="w-100">Flex item 3</div>
</div>

Side note: .w-100 is a Bootstrap 4 utility class that makes the element it is used with have the width 100%.

Item Wrapping in the Flex Containers

If your Bootstrap 4 flex container is not big enough for its elements and you don’t specify that some of them need to shrink, the elements will overflow the container. The class to explicitly call this behaviour is .flex-nowrap.

<div class="d-flex flex-nowrap">
  <div class="item-big-width">Flex item 1</div>
  <div class="item-big-width">Flex item 2</div>
  <div class="item-big-width">Flex item 3</div>
</div>

You can change this behaviour by telling the container to move elements that don’t fit to another row. You will need to add the .flex-wrap.

class. This is what will happen:

<div class="d-flex flex-wrap">
  <div class="item-big-width">Flex item 1</div>
  <div class="item-big-width">Flex item 2</div>
  <div class="item-big-width">Flex item 3</div>
</div>

You can also make the rows fill in reverse mode with the .flex-wrap-reverse class.

<div class="d-flex flex-wrap-reverse">
  <div class="item-big-width">Flex item 1</div>
  <div class="item-big-width">Flex item 2</div>
  <div class="item-big-width">Flex item 3</div>
</div>

Bootstrap 4 Flex Responsiveness

All the classes that I have described in this tutorial are mobile-first. When you are using one, you are describing the behaviour for a phone first and the behaviour stays the same for larger screens. But, just like you did with rows and columns, you can specify the behaviour the flex elements should have for every breakpoint.

Every class has variations for breakpoints:

.d-flex comes with .d-[breakpoint]-flex;
.flex-row with .flex-[breakpont]-row;
.flex-column with .flex-[breakpoint]-column;
.justify-content-[option] with .justify-content-[breakpoint]-[option];
.align-items-[option] with .align-items-[breakpoint]-[option];
.align-self-[option] with .align-self-[breakpoint]-[option];
.flex-fill with .flex-[breakpoint]-fill;
.flex-grow-[0/1] with .flex-[brekapoint]-grow-[0/1];
.flex-shrink-[0/1] with .flex-[brekapoint]-shrink-[0/1];
.flex-wrap with .flex-[breakpoint]-wrap.

The breakpoints are the following:

sm for screens starting with 576px;
md for screens starting with 768px;
lg for screens starting with 992px;
and xl for screens starting with 1200px.

So, for example, you can set the flexbox direction to be column for mobile devices and row for screens starting with the laptop this way:

<div class="d-flex flex-column flex-lg-row">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

And the result on mobile devices will look like this:

And on bigger screens:

We can then specify that the elements should be aligned to the center when viewed on bigger screens:

<div class="d-flex flex-column flex-lg-row align-items-md-center">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

This code will leave the alignment for screens below the lgbreakpoint the same and will center the items for bigger screens:

My recommendation is to try to add classes for different breakpoint and switch between resolutions in your browser. You can also fork and edit the CodePen I have inserted in this article. Let me know if something doesn’t work out as expected and I will do my best to help!

This is a wrap for today! You can give yourself a pat on the back because the hardest part is behind you. You should now understand the basic layout utilities. In the next days we will start working with Bootstrap 4 elements and components.

Photo credit to Vincent Sholohov for his shot.

Photo credit for featured image to Waldek Graczyk for his shot.