Bootstrap4 Grid System

Bootstrap provides a responsive, mobile-first, fluid grid system that scales up to 12 columns as the device or viewport size increases.

We can also define the number of columns according to our needs:

| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | | 4 | 4 | 4 | | 4 | 8 | | 6 | 6 | | 12 |

The grid system of Bootstrap 4 is responsive, and columns will automatically rearrange based on the screen size.

Grid Classes

Bootstrap 4 grid system has the following 5 classes:

• .col- for all devices

• .col-sm- for tablets - screen width equal to or greater than 576px

• .col-md- for desktop displays - screen width equal to or greater than 768px

• .col-lg- for large desktop displays - screen width equal to or greater than 992px

• .col-xl- for extra-large desktop displays - screen width equal to or greater than 1200px

Grid System Rules

Bootstrap 4 grid system rules:

• Each row needs to be placed within a container with the class .container (fixed width) or .container-fluid (full-width), which automatically sets some margins and padding.

• Use rows to create horizontal groups of columns.

• Content should be placed within columns, and only columns can be immediate children of rows.

• Predefined classes like .row and .col-sm-4 can be used for quick grid layouts.

• Columns create gaps between column content through padding. This gap is offset by negative margins on .row classes for the first row and the last column.

• Grid columns are created by spanning a specified 12 columns. For example, to set three equal columns, use three .col-sm-4.

• The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox instead of floats. One advantage of flexbox is that grid columns without a specified width will automatically become equal width and equal height columns. If you want to learn more about flexbox, you can read our CSS Flexbox tutorial.

The following table summarizes how the Bootstrap grid system works on different devices:

The various classes can be used together to create more flexible page layouts.

Basic Structure of Bootstrap 4 Grid

The following code is the basic structure of the Bootstrap 4 grid:

Bootstrap 4 Grid Basic Structure

<!-- First example: Control column width and how they display on different devices -->
<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Second example: Let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

First example: Create a row (<div class="row">). Then, add the desired columns (set in the .col-*-* class). The first asterisk () represents the responsive device: sm, md, lg, or xl, and the second asterisk () represents a number, with the sum of numbers in the same row being 12. Second example: Instead of adding numbers to each col, let Bootstrap handle the layout automatically, so that each column in the same row has equal width: two "col"s, each taking up 50% of the width. Three "col"s, each taking up 33.33% of the width, four "col"s, each taking up 25% of the width, and so on. Similarly, you can use .col-sm|md|lg|xl to set responsive rules for columns.

Next, let's look at some examples.

Creating Equal Width Columns, Bootstrap Automatic Layout

Example

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

Equal Width Responsive Columns

The following example demonstrates how to create equal width responsive columns on tablets and larger screens. On mobile devices, i.e., when the screen width is less than 576px, the four columns will stack vertically:

Example

<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>

Unequal Width Responsive Columns

The following example demonstrates how to create unequal width responsive columns on tablets and larger screens. On mobile devices, i.e., when the screen width is less than 576px, the two columns will stack vertically:

Example

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

Tablets and Desktops

The following example demonstrates how on desktop monitors, two columns each take up 50% of the width, while on tablets, the left column takes up 25% and the right column takes up 75%. On small devices like mobile phones, they will stack vertically.

Example

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>tutorialpro</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>tutorialpro.org</p>
    </div>
  </div>
</div>

Tablets, Desktops, Large Desktop Monitors, Extra Large Desktop Monitors

The following example shows the width ratios on tablets, desktops, large desktop monitors, and extra-large desktop monitors as 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33%, respectively. On small devices like mobile phones, they will stack vertically.

Example

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>tutorialpro</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>tutorialpro.org</p>
    </div>
  </div>
</div>

Offset Columns

Offset columns are set using the offset-*-* classes. The first asterisk ( * ) can be sm, md, lg, xl, indicating the screen device type, and the second asterisk ( * ) can be a number from 1 to 11.

To use offsets on large screen displays, use the .offset-md- classes. These classes increase the left margin of a column by columns, where * ranges from 1 to 11.

For example: .offset-md-4 shifts .col-md-4 four columns to the right.

Example

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">

<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>