Bootstrap 4 Grid Layout Tutorial

Bootstrap 4 offers a powerful grid layout system which helps to create mobile friendly layouts easily. There are five responsive breakpoints for different sizes of devices in Bootstrap 4 grid layout system. Each row is divided into 12 columns and by mixing and matching, you can create different layouts you desire. The grid system is based on flex box and is fully responsive. View demo of Bootstrap 4 grid layout.

Bootstrap 4 Grid Layout Tutorial

This tutorial contains the following topics:

  1. Grid layout basics
  2. Tier 5 grid system
  3. Equal width simple grid
  4. One column width and resize other columns
  5. Variable Width Content
  6. Equal Width Multiple Rows Grid
  7. Stacked Horizontal Grid
  8. Vertical Alignment
  9. Horizontal Alignment
  10. Grid with No Gutters
  11. Wrapped Column Grid
  12. Column Content Reordering within Grid
  13. Column Offsetting
  14. Nesting within Grid

Offer: Get 92% discount of Mobirise Bootstrap site builder.

1. Basics of Bootstrap Grid System

The grid system uses three main CSS classes to create the needed layout – .container, .row and .col. The container covers the complete layout and then the rows and then the columns.

  • The .container class is used for centering the content with fixed width while .container-fluid is used for responsive full width layout.
  • The .row class is used to include all horizontal columns divided into 12 equal width.
  • The actual content should be placed inside the columns using .col or .col-* class. For example, a row can contain two columns like .col-8 + .col-4. The column should be the immediate child of the row class.
  • All columns uses flexbox which means simple using .col class will divide the row into equal width columns. For example, when you use two .col classes within a row then it will be divided into two 50% areas automatically.
  • You can explicitly define column width like .col-sm-8 which will occupy 3/4 (75%) of the row’s width.
  • By default columns and rows have padding and margin for better visibility. You can remove the margin and padding by adding an additional “.noglutter” class with “.row”.
  • There are 5 breakpoints offered in Bootstrap 4 – extra small, small, medium, large and extra large.
  • By default the .col class will be applied to all tiers of breakpoints. Any other classes used will be applied to all higher level devices. For example, .col-sm-4 (small) will be applied to small, medium, large and extra large devices.

2. Tier 5 Grid System

Below table shows the five tiers of breakpoints offered in Bootstrap 4:

GridExtra SmallSmallMediumLargeExtra Large
Breakpoint<576px≥576px≥768px≥992px≥1200px
CSS Class.col-.col-sm-.col-md-.col-lg-.col-xl-
ColumnsEach row is divided in to 12 equal width columns.
Gutter Width15 pixels on each side of the column totaling to 30px.
NestingYes, columns can be nested within other column.
Column OrderingYes, content inside any of the column within a row can be reordered.

Let us show different examples to understand the grids better:

3. Equal Width Simple Grid

Create simple grid with equal columns just using “.col” classes. When using “.col” classes the row will be automatically divided into equal width columns. For example when use two “.col” classes then the row will be divided into two 1/2+1/2 columns. Below is an example codes to create 1/2+1/2 and 1/3+1/3+1/3 columns using simple “.col” classes.

<div class="container">
<div class="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>
<div class="row">
<div class="col">
.col
</div>
<div class="col">
.col
</div>
<div class="col">
.col
</div>
</div>
</div>

The equal columns will be shown on the browser like below:

Equal Simple Width Columns Grid

4. One Column Width and Resize Other Columns

Bootstrap grid system allows you to define the width for one column and the remaining columns within the same row will automatically adjusted. For example, when you define “col + col-6 + col” in a row then it will be automatically divided like “1/3+1/6+1/3” columns. Below are two examples for defining one column and then the remaining two other columns will be adjusted accordingly.

One Column Width and Resize Other Columns

Below is the code for adjusting columns surrounding the column with the defined width:

<div class="container">
  <div class="row">
    <div class="col">
      .col
    </div>
    <div class="col-6">
      .col-6
    </div>
    <div class="col">
      .col
    </div>
  </div>
  <div class="row">
    <div class="col">
      .col
    </div>
    <div class="col-5">
      .col-5
    </div>
    <div class="col">
      .col
    </div>
  </div>
</div>

5. Variable Width Content

Width of the columns can be restricted to the actual content using “.col-{breakpoint}-auto” class, for example, “.col-md-auto”.

Variable Width Content

The middle columns in the above example is automatically adjusted to the width of the content. Below is the code for the above grid layout:

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      .col .col-lg-2
    </div>
    <div class="col-md-auto">
      .col-md-auto (variable width)
    </div>
    <div class="col col-lg-2">
      .col .col-lg-2
    </div>
  </div>
  <div class="row">
    <div class="col">
      .col
    </div>
    <div class="col-md-auto">
      .col-md-auto (variable width)
    </div>
    <div class="col col-lg-2">
      .col .col-lg-2
    </div>
  </div>
</div>

6. Equal Width Multiple Rows Grid

Simply create a multiple columns layout within a row using “.col” classes continuously. You just need to insert “.w-100” class where a breakpoint is required.

Equal Width Multiple Rows Grid

Below is the code to create equal width multiple row using a single “row” class.

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="w-100"></div>
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="w-100"></div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

7. Stacked Horizontal Grid

You can create stacked grid layout using “.col-sm-” classes which will be expanded to horizontal grid on desktop.

Stacked Horizontal Grid

Below is the code for creating stacked horizontal grid layout as shown above.

<div class="row">
<div class="col-sm-8">.col-sm-8</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">.col-sm</div>
<div class="col-sm">.col-sm</div>
<div class="col-sm">.col-sm</div>
</div>

8. Vertical Alignment

The vertical alignment of the content inside a column can be adjusted by adding one of the following three classes with “.row” class like below:

<div class="row align-items-start"> - Align content vertical top
<div class="row align-items-center"> - Align content vertical middle
<div class="row align-items-end"> - Align content vertical bottom

9. Horizontal Alignment

Similar to vertical alignment, you can also adjust the horizontal alignment of the columns like below:

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      .col-4
    </div>
    <div class="col-4">
      .col-4
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      .col-4
    </div>
    <div class="col-4">
      .col-4
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      .col-4
    </div>
    <div class="col-4">
      .col-4
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      .col-4
    </div>
    <div class="col-4">
      .col-4
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      .col-4
    </div>
    <div class="col-4">
      .col-4
    </div>
  </div>
</div>

This will produce the following result on the browser:

Horizontal Column Alignment

10. Grid with No Gutters

By default the columns will have horizontal padding and the rows will have negative horizontal margins for better alignment. You can remove those margins and paddings by using “no-gutters” class with “row” as shown below.

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

It will produce the following result:

Grid with No Gutters

11. Wrapped Column Grid

When you have more than 12 columns in a row then the columns will be automatically wrapped to next row. For example, with the below first two columns will fit in first row (9+2=11) while the third and fourth columns will be wrapped in to new line.

<div class="row">
<div class="col-9">.col-9 (Row 1)</div>
<div class="col-2">.col-2 (Row 1)</div>
<div class="col-4">.col-4 (Row 1)</div>
<div class="col-5">.col-5 (Row 1)</div>
</div>

The wrapped columns will look like below:

Wrapped Column Grid

Learn complete Bootstrap 4 tutorials.

12. Column Content Reordering within Grid

Bootstrap allows you to reorder the content of a column regardless of the position in a row. For example, there are three columns used in the below grid layout.

<div class="container">
  <div class="row">
    <div class="col">
      First .col No order
    </div>
    <div class="col order-12">
      Second .col .order-12 moved to last
    </div>
    <div class="col order-1">
      Third .col .order-1 moved to first
    </div>
  </div>
</div>

The result will be produced like below with no ordered column will take the precedence of all other ordered columns and shown in first column. Content within the column using “order-12” class will be moved to the last position. And the content within the column using “order-1” will be moved to center (first) position.

Column Content Reordering within Grid

13. Column Offsetting

Bootstrap 4 dropped the column offsetting feature due to the use of flexbox grid layout. But you can stll move the columns away using margin utility classes like “ml-auto”, “mr-auto”, etc.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Below is the result of the column offsetting using margin classes:

Column Offsetting

14. Nesting within Grid

Columns can be nested within other columns as shown below:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

It will produce the following result:

Nesting within Grid

Conclusion

As you can see, there are plenty of default layouts can be created with the Bootstrap 4 grid layout system. It is also possible to create custom CSS for creating customized layouts or modifying one of the default layouts. The solid flexbox grid layout and reusable components make Bootstrap 4 more stronger than the previous version. You can view the demo of all styles here.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment