Grid System Basics

Grid System Basics

Bootstrap's grid system uses flexbox to lay out up to 12 columns across the page. The grid is responsive: columns stack on small screens and become horizontal on larger ones.

Grid classes

Use .row for the horizontal wrapper and .col-* classes for columns.

<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>

Three equal columns

<div class="row">
  <div class="col">1 of 3</div>
  <div class="col">2 of 3</div>
  <div class="col">3 of 3</div>
</div>

The plain .col class automatically splits the row into equal-width columns.

Number columns

Use a number to control the width. The total should add to 12:

<div class="row">
  <div class="col-4">1 of 3 (4 wide)</div>
  <div class="col-4">2 of 3 (4 wide)</div>
  <div class="col-4">3 of 3 (4 wide)</div>
</div>

Mobile-first

All Bootstrap 5 grid classes are mobile first. Classes like col-md-6 mean "6 columns wide starting at the medium breakpoint."

TL;DR

• The grid has 12 columns.
• .row holds the columns.
• .col makes equal-width columns.
• .col-{breakpoint}-{number} sets specific widths.