Bootstrap5 Grid system

Bootstrap provides a responsive, mobile-first flow 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:

Bootstrap 5’s grid system is responsive, and columns are automatically rearranged according to screen size.

Make sure that the sum of the columns in each row is equal to or less than 12.

Grid class

The Bootstrap 5 grid system has the following 6 classes:

.col – For all devices.
.col-sm – Flat – Screen width equal to or greater than 576px.
.col-md – Desktop monitor – screen width equal to or greater than 768px.
.col-lg – Large desktop monitor – screen width equal to or greater than 992px.
.col-xl – Extra Large Desktop Monitor – Screen width equal to or greater than 1200px.
.col-xxl – Extra large desktop monitors – screen widths equal to or greater than 1400px.

Grid system rules

Bootstrap5 grid system rules:

Each row of the grid needs to be placed in a container with .container (fixed width) or .container-fluid (full screen width) classes set so that some outer and inner margins can be set automatically.
Use rows to create horizontal groups of columns.
The content needs to be placed in columns, and only columns can be direct children of rows.
Predefined classes such as .row and .col-sm-4 can be used to quickly create grid layouts.
Columns create a gap between the column contents by padding. This gap is set by negative margins on the .rows class to set the offset between the first and the last column.
Grid columns are created by spanning the specified 12 columns. For example, setting up three equal columns requires the use of three .col-sm-4 to set up.
Bootstrap 5 and Bootstrap 4 use flexbox (flexible box) instead of floating. A big advantage of flexbox is that grid columns without a specified width are automatically set to equal-width and equal-height columns .

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

Bootstrap5 Grid system

We use a combination of the above classes to create more flexible page layouts.

Note: Each class is scaled, so if you want to set sm and md to have the same width, you just need to specify sm.

The basic structure of the Bootstrap 5 grid

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

<!-- First example: controlling the width of the columns and how they are displayed 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: or let Bootstrapers handle the layout automatically -->
<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 column (set in the .col-*-* class).

The first asterisk (*) indicates the device responding: sm, md, lg or xl
The second asterisk (*) indicates a number, and the numbers in the same row add up to 12

Second example: Instead of adding a number to each col and letting bootstrap handle the layout automatically, each column in the same row is of equal width: two "col " would be 50% wide each. Three "col " would be 33.33% width each, four "col " would be 25% width each, and so on. Again, you can use .col-sm|md|lg|xl to set the column response rules.

Next we can look at examples.

Create equal-width columns(Bootstrap automatic layout)

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 Examples from apidemos.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Create columns of equal width by apidemos.com</h1>
  <p>Create three columns of equal width! Try adding a new class="col" div to the class="row" div, which will display four columns of equal width.</p>
  <div class="row">
    <div class="col p-3 bg-primary text-white">.col</div>
    <div class="col p-3 bg-dark text-white">.col</div>
    <div class="col p-3 bg-primary text-white">.col</div>
  </div>
</div>

</body>
</html>

Output：

Bootstrap5 Grid system

Equal Width Responsive Columns

The following example demonstrates how to create responsive columns of equal width on tablets and larger screens. On mobile devices, where the screen width is less than 576px, the four columns will be stacked up and down:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Equal Width Responsive Columns by apidemos.com</h1>
  <p>Reset the browser size to check the effect.</p>
  <p> On mobile devices, where the screen width is less than 576px, the four columns will be stacked up and down. </p>
  <div class="row">
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
    <div class="col-sm-3 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-3 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap5 Grid system

Unequal Width Responsive Columns

The following example demonstrates the creation of responsive columns of unequal widths on tablets and larger screens. On mobile devices, where the screen width is less than 576px, the two columns will be stacked up and down:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 Demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Unequal Width Responsive Columns by apidemos.com</h1>
  <p>On mobile devices, where the screen width is less than 576px, the four columns will be stacked up and down.</p>
  <div class="row">
    <div class="col-sm-4 p-3 bg-primary text-white">.col</div>
    <div class="col-sm-8 p-3 bg-dark text-white">.col</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap5 Grid system

Set the width of a column

If you set the width of only one column, the other columns will automatically split the rest of the width equally. The following examples set the column widths to 25%, 50%, 25%:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h2>Set the width of a column</h2>
  <p>If you set the width of only one column, the other columns will automatically split the rest of the width equally. The following examples set the column widths to 25%, 50%, 25%.</p>
  <div class="row">
    <div class="col bg-success">.col</div>
    <div class="col-6 bg-warning">.col-6</div>
    <div class="col bg-success">.col</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap5 Grid system

Tablet and desktop

The following example demonstrates that the two columns are each 50% wide on the display of a desktop device, 25% wide on the left and 75% wide on the right if on a tablet, and stacked on smaller devices such as cell phones.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 Demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Grid layout for tablet and desktop</h1>
  <p>The following example demonstrates that the two columns are each 50% wide on the display of a desktop device, 25% wide on the left and 75% wide on the right if on a tablet, and stacked on smaller devices such as cell phones.
</p>
  <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>
</div>

</body>
</html>

The results run on a 1323×190 screen are as follows:

Bootstrap5 Grid system

Flat panel, desktop, large desktop monitor, extra large desktop monitor

The following examples are displayed on flat panels, desktops, large desktop monitors, and oversized desktop monitors with width ratios of 25%/75%, 50%/50%, 33.33%/66.67%, and 16.67/83.33%, respectively, and are stacked on small devices such as cell phones.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 Demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Flat panel, desktop, large desktop monitor, extra large desktop monitor</h1>
  <p>The following examples are in the width ratios of 25%/75%, 50%/50%, 33.33%/66.67%, and 16.67/83.33% for flat panel, desktop, large desktop display, and very large desktop display, respectively, and will be stacked on smaller devices such as cell phones.</p>
  <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>
</div>

</body>
</html>

Output:

Bootstrap5 Grid system

Nested Columns

The following example creates a two-column layout, with one column nested within the other two columns.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demos</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h2>Nested Columns</h2>
  <p>Add another column to a column:</p>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-8 bg-warning p-4">
      .col-8
      <div class="row">
        <div class="col-6 bg-light p-2">.col-6</div>
        <div class="col-6 bg-secondary p-2">.col-6</div>
      </div>
    </div>
    <div class="col-4 bg-success p-4">.col-4</div>
  </div>
</div>

</body>
</html>

Output:

Bootstrap5 Grid system

Offset column

The offset column is set by the offset-*-* class. 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.

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

For example, .offset-md-4 moves .col-md-4 four columns to the right.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Offset column</h1>
  <p>.offset-md-4 is a four-column shift of .col-md-4 to the right.</p>
  <div class="row">
      <div class="col-md-4 p-3 bg-primary text-white">.col-md-4</div>
      <div class="col-md-4 offset-md-4 bg-dark text-white">.col-md-4 .offset-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-3 offset-md-3 bg-primary text-white">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3 bg-dark text-white">.col-md-3 .offset-md-3</div>
    </div>
    <div class="row">
      <div class="col-md-6 offset-md-3 bg-primary text-white">.col-md-6 .offset-md-3</div>
    </div>
</div>

</body>
</html>

Output:

Bootstrap5 Grid system

Bootstrap 5 Grid system

Bootstrap5 Grid system

Grid class

Grid system rules

The basic structure of the Bootstrap 5 grid

Create equal-width columns(Bootstrap automatic layout)

Equal Width Responsive Columns

Unequal Width Responsive Columns

Set the width of a column

Tablet and desktop

Flat panel, desktop, large desktop monitor, extra large desktop monitor

Nested Columns

Offset column

Related

Top