Bootstrap 5 Grid System

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:

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

Make sure the total is equal to or less than 12 (not all 12 available columns need to be used).

Grid classes

Bootstrap 5 grid system provides six classes:

  • .col- (Mini 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 768px)
  • .col-lg- (Large devices - screen width is equal to or greater than 992px)
  • .col-xl- (Super-large devices - screen width is equal to or greater than 1200px)
  • .col-xxl- (Extra-large devices - screen width is equal to or greater than 1400px)

Combining the above classes can create more dynamic and flexible layouts.

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

Basic structure of Bootstrap 5 grid

Here is the basic structure of the 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>

Try It Yourself

First example: Create a row (<div class = "row">). Then, add the required number of columns (with .col-*-* class tag). The first asterisk (*) represents responsiveness: sm, md, lg, xl, or xxl, and the second asterisk represents a number, and the total should be 12 per row.

Second example: Don't give each col Add a number instead of letting bootstrap handle the layout to create equal-width columns: two "col" Element = 50% width of each column, and three columns = 33.33% width of each column. Four columns = 25% width, etc. You can also use .col-sm|md|lg|xl|xxl Make columns responsive.

Grid Options

The following table summarizes how the Bootstrap 5 grid system works at different screen sizes:

Extra Mini (<576px) Mini (>=576px) Small (>=768px) Medium (>=992px) Large (>=1200px) Extra Large (>=1400px)
Class Prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Grid Behavior Always Horizontal Collapse Start, Horizontal Above Breakpoint Collapse Start, Horizontal Above Breakpoint Collapse Start, Horizontal Above Breakpoint Collapse Start, Horizontal Above Breakpoint Collapse Start, Horizontal Above Breakpoint
Container Width None (auto) 540px 720px 960px 1140px 1320px
Applicable to Phone Portrait Phone Landscape Tablet Laptop Laptop and Desktop Laptop and Desktop
Column # 12 12 12 12 12 12
Gutter Width 1.5rem (0.75rem on each side of the column) 1.5rem (0.75rem on each side of the column) 1.5rem (0.75rem on each side of the column) 1.5rem (0.75rem on each side of the column) 1.5rem (0.75rem on each side of the column) 1.5rem (0.75rem on each side of the column)
Nested Yes Yes Yes Yes Yes Yes
Offset Yes Yes Yes Yes Yes Yes
Column Sorting Yes Yes Yes Yes Yes Yes