The Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

Grid Classes

The Bootstrap 5 grid system has six classes:

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

Basic Structure of a Bootstrap 5 Grid

Example

<!-- Control the column width, and how they should appear 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 automatically handle the layout -->
<div class="row">
 <div class="col"></div>
 <div class="col"></div>
 <div class="col"></div>
</div>

You can click on above box to edit the code and run again.

Output

Grid Options

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

	Extra small (<576px>)	Small (>=576px)	Medium (>=768px)	Large (>=992px)	Small Extra Large (>=1200px)	XXL (>=1400px)
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
Grid behaviour	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	540px	720px	960px	1140px	1320px
Suitable for	Portrait phones	Landscape phones	Tablets	Laptop	Laptop & Desktop	Laptop & Desktop
# of columns	12	12	12	12	12	12
Gutter width	1.5rem (.75rem on each side of a column)	1.5rem (.75rem on each side of a column)	1.5rem (.75rem on each side of a column)	1.5rem (.75rem on each side of a column)	1.5rem (.75rem on each side of a column)	1.5rem (.75rem on each side of a column)
Nestable	Yes	Yes	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes	Yes	Yes