Bootstrap 5 Grid System Tutorial — Everything You Need to Know

The Bootstrap 5 grid is the foundation of every layout you'll build with Bootstrap. Once you understand it properly, building responsive layouts becomes straightforward.

The Basic Concept

Bootstrap's grid is built on three elements: container, row and col. They must always be nested in this order.

<div class="container">      <!-- 1. Container controls max width -->
  <div class="row">          <!-- 2. Row creates a horizontal group -->
    <div class="col">        <!-- 3. Col is the actual column -->
      Content
    </div>
  </div>
</div>

Never put a col directly inside a container without a row. That breaks the gutter system.

The 12-Column System

Bootstrap divides each row into 12 equal columns. You specify how many columns each element should span:

<div class="container">
  <div class="row">
    <div class="col-6">Half width (6 of 12)</div>
    <div class="col-6">Half width (6 of 12)</div>
  </div>
  <div class="row">
    <div class="col-4">One third (4 of 12)</div>
    <div class="col-4">One third (4 of 12)</div>
    <div class="col-4">One third (4 of 12)</div>
  </div>
  <div class="row">
    <div class="col-8">Two thirds (8 of 12)</div>
    <div class="col-4">One third (4 of 12)</div>
  </div>
</div>

Numbers must add up to 12 per row. If they exceed 12, columns wrap to the next line.

Responsive Breakpoints

This is where it gets powerful. Add breakpoint prefixes to make columns change width at different screen sizes:

<div class="col-12 col-sm-6 col-md-4 col-lg-3">

Reading left to right: full width on mobile → half width on small → third on medium → quarter on large.

The six breakpoints:

Auto Layout Columns

Use col without a number for equal-width columns that share available space:

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

You can mix fixed and auto columns:

<div class="row">
  <div class="col">Fills remaining space</div>
  <div class="col-4">Fixed 4 columns</div>
  <div class="col">Fills remaining space</div>
</div>

Gutters

Gutters are the gaps between columns. Bootstrap 5 uses the g-* utility classes:

<div class="row g-3">     <!-- 16px gap all sides -->
<div class="row gx-4">    <!-- 24px horizontal gap only -->
<div class="row gy-2">    <!-- 8px vertical gap only -->
<div class="row g-0">     <!-- No gaps -->

Gutter sizes: 0, 1 (4px), 2 (8px), 3 (16px), 4 (24px), 5 (48px).

Nesting

Place a new row inside any column to create a nested grid:

<div class="row">
  <div class="col-8">
    <!-- Nested grid — 12 columns within this col-8 -->
    <div class="row">
      <div class="col-6">Half of the col-8</div>
      <div class="col-6">Half of the col-8</div>
    </div>
  </div>
  <div class="col-4">Sidebar</div>
</div>

The nested row always has its own 12 columns regardless of the parent column width.

Offset Columns

Push columns to the right using offset-*:

<!-- Centered single column -->
<div class="row">
  <div class="col-6 offset-3">Centered content (6 cols, offset 3)</div>
</div>

<!-- Two columns with a gap between them -->
<div class="row">
  <div class="col-4">Left</div>
  <div class="col-4 offset-4">Right (pushed to far right)</div>
</div>

Column Ordering

Change visual order without changing HTML order using order-*:

<div class="row">
  <div class="col order-2">This appears second</div>
  <div class="col order-1">This appears first</div>
</div>

<!-- Responsive reordering -->
<div class="row">
  <div class="col-md-8 order-md-2">Main content (appears second on desktop)</div>
  <div class="col-md-4 order-md-1">Sidebar (appears first on desktop)</div>
</div>

Real-World Layout Patterns

Blog layout — content + sidebar:

<div class="container">
  <div class="row g-4">
    <main class="col-lg-8"><!-- article content --></main>
    <aside class="col-lg-4"><!-- sidebar --></aside>
  </div>
</div>

Card grid — 1 col mobile, 2 tablet, 3 desktop:

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
  <div class="col"><div class="card h-100">Card</div></div>
  <div class="col"><div class="card h-100">Card</div></div>
  <div class="col"><div class="card h-100">Card</div></div>
</div>

Dashboard stats row — 4 equal stat cards:

<div class="row g-3">
  <div class="col-sm-6 col-xl-3"><!-- stat card --></div>
  <div class="col-sm-6 col-xl-3"><!-- stat card --></div>
  <div class="col-sm-6 col-xl-3"><!-- stat card --></div>
  <div class="col-sm-6 col-xl-3"><!-- stat card --></div>
</div>

Common Mistakes

Forgetting the row wrapper — columns without a row create messy layouts. Always: container → row → col.

Columns not adding up to 12 — if you have col-5 + col-5 = 10, the remaining 2 columns of space sit empty on the right. Usually you want col-6 + col-6 for equal halves.

Using fixed pixel widths on columns — don't set width: 300px on a col. Use Bootstrap's column classes instead. Fixed widths break responsiveness.

Not using g- for gutters* — Bootstrap 5 replaced the old padding approach with the g-* utility. Use g-3 or g-4 on rows instead of adding padding to individual columns.