Introducing Bootstrap 5 Grid Layout/Flexbox

Introducing Bootstrap 5 Grid Layout/Flexbox

In this part, we'll look at the Grid layout in Bootstrap 5, which is based on Flexbox.

This tutorial introduces the Bootstrap Grid system while keeping Flexbox in mind, since Bootstrap 5 now uses Flexbox as the default display system for the grid layout, bringing many new and powerful capabilities to how you may design your website layouts using the Bootstrap 5 grid.

Flexbox is a CSS 3 display technique that lets the container to have greater control over the size of items and then adapt to multiple viewports, making it quick and straightforward to develop layouts for dynamic or unknown screen sizes.

Without further ado, let's build and understand a basic page layout using the Bootstrap 5 grid approach.

Build a layout with Bootstrap 5 Grid

First, you need to create an HTML page and link the Bootstrap 5 assets. You can simply use this template from the official Bootstrap 5 docs

<!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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>BS 4 Flexbox Examples</title>  </head>  <body>    Add Content Here
    <!-- 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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>  </body></html>

In order to create a grid, you’ll have to use some predefined BootStrap classes (.container, .row, col-*-*)

The grid should have a container, rows and columns.

The container is simply a <div> with the .container or .container-fluid classes. Why do you need a container and what is the difference between those two classes?

The container simply provides a width or a maximal width for all the other elements of the grid. For the difference .container allows you to create fixed-width container and .container-fluid allows you to create a full 100% container.

Rows provide home for columns. The number of rows can theoretically be unlimited.

Columns are what make the cells for the grid system. Each row can only take up to 12 columns (each column spans 1/12 of the available width). Practically a column spans more than one unit but there is one important rule ALL COLUMNS SHOULD ADD UP TO 12

To create a column you simply use a <div> with the the class(es) col-*-*

The first star for the screen breakpoint (xs, sm, md, lg, xl) and the second star for column size (1 .. 12).

<div class="row">    <div class="col-sm-1 first-column">      <p>.col-sm-1</p>    </div>    ...    <div class="col-sm-1 second-column">      <p>.col-sm-1</p>    </div>     </div>

See this code pen

Now let’s create a second row with two columns

<div class="row">    <div class="col-sm-6 first-column">      <p>.col-sm-6</p>    </div>    <div class="col-sm-6 second-column">      <p>.col-sm-6</p>    </div>     </div>

Note that .col-sm-6 + .col-sm-6 === .col-sm-12

Also note that you don’t need to explicitly add upper breakpoint classes i.e col-md-6 to col-xl-6 because .col-sm-6 means the size of the column should be 6 units from the small breakpoint and up

Next let’s add a third row with three columns

The first column spans two units, the second spans three units and the third spans the remaining 7 units. All colmuns sized add up to 12

.col-sm-2 + .col-sm-3 + .col-sm-7 === .col-sm-12

If you have previously used Bootstrap before version 5 you should have be familiar with all these concepts so what the new features Bootstrap 5 bring?

If you need to create a layout with automatic width columns you simply need to use .col-* or just .col without specifying the size and Bootstrap will take care of equally dividing the available width among those columns

<div class="row">    <div class="col first-column"></div>    <div class="col second-column"></div>    <div class="col first-column"></div>  </div>

Now if you add a bunch of text to each column in order to chaine their heights you are going to get something like

As can be seen, unlike Bootstrap 3 all columns have the same height disregarding their contents which gives a better sense of a grid system.

Bootstrap 5 Flex Utilities

Bootstrap 5 by default uses Flexbox but it also provides a set of class utilities that allow you to work with Flexbox without resorting to custom CSS.

If you want to make a div element a flex container you can simply add the .d-flex class to a <div>

<div class="d-flex">This is now a flex container</div>

Or you can instead use d-inline-flex to create a inline flex container.

These two classes have also responsive versions i.e you can use d-d-*-flex and d-*-inline-flex where the start can be one of these breakpoints values xs, sm, md, lg and xl.

One important aspect of Flexbox is the ability to easily set the direction of items inside a flex container.

By default the direction is horizontal from left to right but can be set to be horizontal but from right to left with .flex-row-reverse or set it to be from left to right again with .flex-row (the default).

You can also use the .flex-column class to set a vertical direction from top to bottom, or the .flex-column-reverse class to change the vertical direction from bottom to top.

See the other available classes to control flex properties from the docs.

Bootstrap 5 Display Utilities

Bootstrap 5 provides a set of utilities that make it easy to set the display property of elements responsively i.e you can change the display property for specific breakpoints or screen sizes. See the docs for more details

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

Simply use .d-{type} for the xs breakpoint or .d-{breakpoint}-{type} for sm, md, lg, and xl where type can be one of these display types

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Summary

We've examined the grid layout in Bootstrap 5 in this tutorial. Bootstrap has always been a fantastic CSS framework for developers developing websites without a CSS designer on the team, and now with additional features like default Flexbox support, you have tremendous tools to build flexible layouts without being a CSS expert.

  • Date: