Bootstrap 5 Grid System


Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive with mobile-first approach. It allows up to 12 columns across the page. The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Bootstrap  Grid System xs <576px sm ≥576px md ≥768px lg ≥992px xl ≥1200px xxl ≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Number of columns 12
Gutter width 1.5rem (.75rem on left and right)
Custom gutters Yes
Nestable Yes
Column ordering Yes

First create a container that acts as a wrapper for your rows and columns using any container classes such as .container, after that create rows inside the container using the .row class, and to create columns inside any row you can use the .col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* and .col-xxl-* classes.

col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1
 col 4  col 4  col 4
col 4 col 8
col 6 col 6
col 12

Responsive 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-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
Try it Yourself

Output:

Responsive Unequal Columns

The following example shows how to get two various-width columns starting at tablets and scaling to large extra desktops.

Example 
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-2">.col-md-2</div>
</div>
Try it Yourself

Output: