Bootstrap5 Grid System

Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen 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 Bootstrap 5 grid system is responsive, and columns will automatically rearrange based on screen size.

Ensure that the sum of columns in each row equals or is less than 12.

Grid Classes

Bootstrap 5 grid system has the following 6 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.

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

Grid System Rules

Bootstrap 5 grid system rules:

• Each grid row should 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 direct 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 set by negative margins on the .row class 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.

• Bootstrap 5 and Bootstrap 4 use flexbox instead of floats. One advantage of flexbox is that grid columns without a specified width will automatically layout as equal width and equal height columns. For more information on Flexbox, you can read our CSS Flexbox tutorial.

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

Combine the above classes to create more flexible page layouts.

Tip: Each class is scalable, so if you want sm and md to have the same width, you only need to specify sm.

Basic Structure of Bootstrap 5 Grid

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

Bootstrap 5 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>

First example: Create a row (<div class="row">). Then, add the required columns (set in the .col-- classes). The first asterisk () represents the responsive device: sm, md, lg, or xl, the second asterisk () represents a number, and the numbers in the same row should add up to 12.

Second example: Instead of adding a number to each col, let Bootstrap automatically handle the layout, so that each column in the same row has equal width: two "col" will each be 50% wide, three "col" will each be 33.33% wide, four "col" will each be 25% wide, and so on. Similarly, you can use .col-sm|md|lg|xl to set the responsive rules for the columns.

Next, let's look at some examples.

Creating Equal Width Columns, Bootstrap Auto 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>

Setting a Column Width

If you set the width of only one column, the other columns will automatically divide the remaining width. The following example sets the column widths to 25%, 50%, and 25%:

Example

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Tablets and Desktops

The following example demonstrates how two columns each take up 50% of the width on desktop monitors, and on tablets, the left column is 25% wide and the right column is 75% wide. On mobile phones and other small devices, the columns 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 Desktops, and Extra Large Desktops

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

Example

<div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.col</div>
</div>

Nested Columns

The following example creates a two-column layout with one column nested inside the other:

Example

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

Offset Columns

Offset columns are set using the `offset-*-*` classes. The first asterisk (*) can be **sm, md, lg, xl**, representing screen device types, 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 a `.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> ```