Bootstrap

Introduction To Bootstrap 4 Flex Layout


 

DemoCode

Flexbox is a new layout mode of CSS3 which is officially called CSS Flexible Box Layout Module. The main advantage of this layout mode is that it makes the following layout tasks easier:

  • alignment of items
  • specification of the layout direction
  • specification of layout order of items

within a layout container. Especially when defining a layout for dynamic or even unknown screen sizes the Flexbox layout mode is a powerful tool. You can apply Flexbox layout by using CSS properties defined by CSS3. Bootstrap 4 makes it even more easy by offering a set of ready made CSS classes for applying Flexbox layout to elements. In the following tutorial we’ll take a deeper look the Bootstrap 4 CSS Flexbox layout classes.

Bootstrap 4 Flex Layout

Getting Started With Bootstrap 4

In order to get started with Bootstrap 4 Flex Layout we first need to setup a basic Bootstrap 4 project. We’ll then use this project to demonstrate the various options of the Bootstrap Flex Layout.

To set up a new Bootstrap 4 Project let’s start with a new empty project folder first:

$ mkdir bs-flex

Inside this new directory create a new file index.html and insert the code of the Bootstrap starter template which is available on https://getbootstrap.com/docs/4.0/getting-started/introduction/:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

USING live-server

To run a local development web server with live reloading capabilities we’ll be using live-server in this tutorial. You can install live-server by using NPM:

$ npm install -g live-server

Having installed live-server you can start the development server by using the following command within the project directory:

$ live-server

The server is starting up on port 8080 by default and the index.html page is displayed in the browser automatically. Now we can change any file of the project and the browser output is updated without the need to reload the page manually.

Defining Some CSS Classes

Before we’re starting to explore Bootstrap’s flex layout let’s define the following CSS classes by adding this style section to the head area of index.html:

<style>
  .my-flex-container {
    border: 2px solid green;
    height: 100px;
    margin-bottom: 20px;
  }
  .my-flex-container-column {
    border: 2px solid green;
    height: 200px;
    margin-bottom: 20px;
  }
  .my-flex-item {
    background-color: lightgrey;
    border: 1px dotted grey;
    height: 48px;
  }
  .my-flex-item-2 {
    background-color: lightgrey;
    border: 1px dotted grey;
    height: 96px;
  }
</style>

We’ll be using those CSS classes to make the div sections, which are used to demonstrate the flex layout classes, visible to the user.

Now, let’s start to take a closer look into Bootstrap’s flex layout.

Using Class d-flex, flex-row

The first simple example makes use of the Bootstrap 4 CSS classes d-flex and flow-row:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
</div>

By using these two classes we’re defining a flex box container which arranges all items in one single row.

The result in the browser should now look like the following:

Using Class d-flex, flex-row-reverse

Change class flex-row to flex-row-reverse:

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

The result changes to:

Using Classes justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between

Next, we’re taking a look at the classes justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between. If we’re applying those classes to a flex row we’re aligning the content horizontally. If those classes are applied to a flex column the alignment is done vertically.

Applying justify-content-start to the example from above:

<div class="d-flex flex-row justify-content-start my-flex-container">
     <div class="p-2 my-flex-item">1</div>
     <div class="p-2 my-flex-item">2</div>
     <div class="p-2 my-flex-item">3</div>
</div>

Result:

Applying justify-content-center:

<div class="d-flex flex-row justify-content-center my-flex-container">
     <div class="p-2 my-flex-item">1</div>
     <div class="p-2 my-flex-item">2</div>
     <div class="p-2 my-flex-item">3</div>
</div>

Result:

Applying justify-content-end:

<div class="d-flex flex-row justify-content-end my-flex-container">
     <div class="p-2 my-flex-item">1</div>
     <div class="p-2 my-flex-item">2</div>
     <div class="p-2 my-flex-item">3</div>
</div>

Result:

Applying justify-content-around:

<div class="d-flex flex-row justify-content-around my-flex-container">
     <div class="p-2 my-flex-item">1</div>
     <div class="p-2 my-flex-item">2</div>
     <div class="p-2 my-flex-item">3</div>
</div>

Result:

Applying justify-content-between:

<div class="d-flex flex-row justify-content-between my-flex-container">
     <div class="p-2 my-flex-item">1</div>
     <div class="p-2 my-flex-item">2</div>
     <div class="p-2 my-flex-item">3</div>
</div>

Result:

Using Classes flex-column and flex-column-reverse

Now let’s change the flex row layout to a column-based flex container by applying the class flex-column:

<div class="d-flex flex-column my-flex-container-column">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
</div>

The flex items are now displayed in one column:

Again we’re able to reverse the order by applying the corresponding class flex-column-reverse:

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

Result:

Using Classes ALIGN-items-start, align-items-center, align-items-end

Now let’s go back to a row-based flex container and see how to align items vertically in the container by applying classes align-items-start, align-items-center and align-items-end.

First let’s see what happens when we apply align-items-start:

<div class="d-flex flex-row align-items-start my-flex-container">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
</div>

Result:

Changing to align-items-center:

<div class="d-flex flex-row align-items-center my-flex-container">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
</div>

Result

End finally using class align-items-end:

<div class="d-flex flex-row align-items-end my-flex-container">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
</div>

Result:

If those classes are applied to a column-based flex layout the alignment would be done horizontally.

Using Classes align-self-start, align-self-center, align-self-end

There are also Bootstrap CSS flex classes available which can be applied to a single flex item: align-selft-start, align-selft-center, and align-self-end.

In this first example align-self-start is applied to the second flex item which is half of the height of the flex items one and three:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 my-flex-item-2">1</div>
    <div class="p-2 align-self-start my-flex-item">2</div>
    <div class="p-2 my-flex-item-2">3</div>
</div>

Result:

Applying align-self-center instead:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 my-flex-item-2">1</div>
    <div class="p-2 align-self-center my-flex-item">2</div>
    <div class="p-2 my-flex-item-2">3</div>
</div>

Result:

With align-self-end:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 my-flex-item-2">1</div>
    <div class="p-2 align-self-end my-flex-item">2</div>
    <div class="p-2 my-flex-item-2">3</div>
</div>

Result:

Wrapping Of Flex Items

The wrapping behavior of flex items can be controlled by applying CSS classes as well. Let’s first take a look at the default wrapping behavior without applying any special wrapping class:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
    <div class="p-2 my-flex-item">4</div>
    <div class="p-2 my-flex-item">5</div>
    <div class="p-2 my-flex-item">6</div>
    <div class="p-2 my-flex-item">7</div>
    <div class="p-2 my-flex-item">8</div>
    <div class="p-2 my-flex-item">9</div>
    <div class="p-2 my-flex-item">10</div>
    <div class="p-2 my-flex-item">11</div>
    <div class="p-2 my-flex-item">12</div>
    <div class="p-2 my-flex-item">13</div>
    <div class="p-2 my-flex-item">14</div>
    <div class="p-2 my-flex-item">15</div>
    <div class="p-2 my-flex-item">16</div>
    <div class="p-2 my-flex-item">17</div>
    <div class="p-2 my-flex-item">18</div>
    <div class="p-2 my-flex-item">19</div>
    <div class="p-2 my-flex-item">20</div>
</div>

The result shows that no wrapping is done. The elements are exceeding the space which is available in the flex container:

Adding the flex-wrap class:

<div class="d-flex flex-row flex-wrap my-flex-container">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
    <div class="p-2 my-flex-item">4</div>
    <div class="p-2 my-flex-item">5</div>
    <div class="p-2 my-flex-item">6</div>
    <div class="p-2 my-flex-item">7</div>
    <div class="p-2 my-flex-item">8</div>
    <div class="p-2 my-flex-item">9</div>
    <div class="p-2 my-flex-item">10</div>
    <div class="p-2 my-flex-item">11</div>
    <div class="p-2 my-flex-item">12</div>
    <div class="p-2 my-flex-item">13</div>
    <div class="p-2 my-flex-item">14</div>
    <div class="p-2 my-flex-item">15</div>
    <div class="p-2 my-flex-item">16</div>
    <div class="p-2 my-flex-item">17</div>
    <div class="p-2 my-flex-item">18</div>
    <div class="p-2 my-flex-item">19</div>
    <div class="p-2 my-flex-item">20</div>
</div>

Now the result changes. Wrapping is active and the flex items which are not fitting in the first row are automatically appear in the second row:

Another option is to use the flex-wrap-reverse class:

<div class="d-flex flex-row flex-wrap-reverse my-flex-container">
    <div class="p-2 my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
    <div class="p-2 my-flex-item">4</div>
    <div class="p-2 my-flex-item">5</div>
    <div class="p-2 my-flex-item">6</div>
    <div class="p-2 my-flex-item">7</div>
    <div class="p-2 my-flex-item">8</div>
    <div class="p-2 my-flex-item">9</div>
    <div class="p-2 my-flex-item">10</div>
    <div class="p-2 my-flex-item">11</div>
    <div class="p-2 my-flex-item">12</div>
    <div class="p-2 my-flex-item">13</div>
    <div class="p-2 my-flex-item">14</div>
    <div class="p-2 my-flex-item">15</div>
    <div class="p-2 my-flex-item">16</div>
    <div class="p-2 my-flex-item">17</div>
    <div class="p-2 my-flex-item">18</div>
    <div class="p-2 my-flex-item">19</div>
    <div class="p-2 my-flex-item">20</div>
</div>

With the following effect:

Order

You can also apply a certain order to flex element by using the CSS class order-[x] as you can see in the following example:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 order-3 my-flex-item">1</div>
    <div class="p-2 order-1 my-flex-item">2</div>
    <div class="p-2 order-2 my-flex-item">3</div>
</div>

The result shows that now the second item is displayed at first because the class order-1 has been applied:

Auto Margins

Another thing which can be applied to single flex items are margins. The following margin classes are available:

  • mr-auto: add margin to the right side of the item
  • ml-auto: add margin to the left side of the item
  • mt-auto: add margin to the top of the item
  • mb-auto: add margin to the bottom of the item

Let’s use our flex row example again and apply the class mr-auto to the first element:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 mr-auto my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
</div>

The result should now look like the following:


Applying mt-auto instead leads to the following result:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 mt-auto my-flex-item">1</div>
    <div class="p-2 my-flex-item">2</div>
    <div class="p-2 my-flex-item">3</div>
</div>

Responsive Variations

You can use responsive variations for all Bootstrap 4 CSS classes, so that those classes are only applied on corresponding screen sizes:

<div class="d-flex flex-row my-flex-container">
    <div class="p-2 my-flex-item-2">1</div>
    <div class="p-2 align-self-sd-start align-self-md-center align-self-lg-end my-flex-item">2</div>
    <div class="p-2 my-flex-item-2">3</div>
</div>

Applying align-self-lg-end for the second item on large screens:

Applying align-self-md-center for same item on mid-size screens:

Applying align-self-sd-start on small screen sizes:

 

Top 3 Bootstrap 4 Online Courses

Bootstrap is one of the top web frameworks for building mobile-first websites. The open source project is based on HTML, CSS and JS and makes building front-ends really easy. The next major version of the popular framework will be version 4 which has just been made available as a beta version. This new version offers lot’s of new features like:

  • Full SASS support (instead of LESS)
  • Improved Grid System
  • Flexbox Support
  • Reboot Module
  • More Customizing Options
  • Dropping IE8 Support and Changing Units to rem and em

Check out our recommendation of top Bootstrap 4 online courses:

Go To Course

Light Bootstrap Dashboard Pro Angular Theme

Light Bootstrap Dashboard PRO Angular is a Bootstrap Admin Theme designed to look simple and beautiful. Forget about boring dashboards and grab yourself a copy to kickstart new project! It is the easiest way to save time and money for your development.

Light Bootstrap Dashboard Pro Angular Theme

  • 120 Handcrafted Components
  • 15 Customized Plugins
  • 24 Example Pages
  • Fully Responsive

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments
    There are currently no comments.

    *