Bootstrap 5 Grid

Bootstrap 5 Grid System

Bootstrap's grid system is built with flexbox, allowing up to 12 columns on the page.

If you do not want to use all 12 columns separately, you can combine these columns to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

The grid system is responsive, and columns will automatically rearrange according to the screen size.

Make sure the total is 12 or less (if you do not need to use all 12 available columns).

Grid classes

Bootstrap 5 grid system has six classes:

  • .col- (extra small devices - screen width is less than 576px)
  • .col-sm- (small devices - screen width is equal to or greater than 576px)
  • .col-md- (medium devices - screen width is equal to or greater than 768 pixels)
  • .col-lg- (large devices - screen width is equal to or greater than 992 pixels)
  • .col-xl- (xlarge devices - screen width is equal to or greater than 1200px)
  • .col-xxl- (xxlarge devices - screen width is equal to or greater than 1400px)

You can combine the above classes to create more dynamic and flexible layouts.

Tip:Each class is scaled proportionally, so if you want to sm and md To set the same width, you only need to specify sm.

Basic structure of Bootstrap 5 grid

Here is the basic structure of Bootstrap 5 grid:

/* Control column width and their display on different devices */
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
/* Or let Bootstrap 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 required number of columns (with appropriate .col-*-* class label). The first asterisk (*) represents responsiveness: sm, md, lg, xl, or xxl, and the second asterisk represents the number, and the total should be 12 for each row.

Second example: Not for each col Add a number instead of letting bootstrap handle the layout to create equal-width columns: two "col" Element = each col is 50% width, and three cols = each col is 33.33% width. Four columns = 25% width, and so on. You can also use .col-sm|md|lg|xl|xxl Make the columns responsive.

Below we have compiled some basic examples of Bootstrap 5 grid layouts.

Three Equal Columns

The following example shows how to create three equal-width columns on all devices and screen widths:

Example

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

Try it yourself

Responsive Columns

The following example shows how to create four equal-width columns starting from a tablet and then expand to extra-large desktops.On mobiles or screens less than 576px wide, the columns will automatically stack together:

Example

<div class="row">
  <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>
</div>

Try it yourself

Two Unequal Responsive Columns

The following example shows how to get two columns of different widths on a tablet and expand to extra-large desktops:

Example

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

Try it yourself

Tip:You will learn about it later in this tutorial Grid System . More content.