Bootstrap Grid System: Complete Guide to Responsive Layouts

Introduction

Bootstrap’s grid system is a 12-column, flexbox-based layout system that makes responsive design straightforward. Understanding how containers, rows, and columns work together — and the rules around spacing — is essential for building clean Bootstrap layouts.

The Three-Layer Structure

Every Bootstrap layout follows this hierarchy:

<div class="container">        <!-- 1. Container: sets max-width -->
  <div class="row">            <!-- 2. Row: horizontal group of columns -->
    <div class="col-md-6">     <!-- 3. Column: content goes here -->
      Content
    </div>
    <div class="col-md-6">
      Content
    </div>
  </div>
</div>

Containers

Containers center and constrain content width:

<!-- Fixed-width container (responsive breakpoints) -->
<div class="container">...</div>

<!-- Full-width container (always 100%) -->
<div class="container-fluid">...</div>

<!-- Responsive containers (full-width until breakpoint) -->
<div class="container-sm">...</div>   <!-- 100% until sm (576px) -->
<div class="container-md">...</div>   <!-- 100% until md (768px) -->
<div class="container-lg">...</div>   <!-- 100% until lg (992px) -->
<div class="container-xl">...</div>   <!-- 100% until xl (1200px) -->
<div class="container-xxl">...</div>  <!-- 100% until xxl (1400px) -->

Breakpoints

Bootstrap 5 has six breakpoints:

Breakpoint	Class infix	Dimensions
Extra small	(none)	< 576px
Small	`sm`	≥ 576px
Medium	`md`	≥ 768px
Large	`lg`	≥ 992px
Extra large	`xl`	≥ 1200px
Extra extra large	`xxl`	≥ 1400px

Column Classes

<!-- Equal-width columns (auto-divide 12 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>

<!-- Specific widths (out of 12) -->
<div class="row">
  <div class="col-4">4 columns wide</div>
  <div class="col-8">8 columns wide</div>
</div>

<!-- Responsive: stack on mobile, side-by-side on medium+ -->
<div class="row">
  <div class="col-12 col-md-6">Full width on mobile, half on desktop</div>
  <div class="col-12 col-md-6">Full width on mobile, half on desktop</div>
</div>

<!-- Mix breakpoints -->
<div class="row">
  <div class="col-12 col-sm-6 col-lg-4">
    Full → Half → Third
  </div>
  <div class="col-12 col-sm-6 col-lg-4">
    Full → Half → Third
  </div>
  <div class="col-12 col-sm-12 col-lg-4">
    Full → Full → Third
  </div>
</div>

The Spacing Rule: Don’t Add Margin to Columns

Bootstrap columns use negative margins on rows to compensate for column gutters. Adding margin-left or margin-right directly to a .col-* element breaks the layout.

<!-- WRONG: margin on the column breaks the grid -->
<div class="col-md-6" style="margin-right: 10px;">...</div>

<!-- CORRECT: add a wrapper div inside the column -->
<div class="col-md-6">
  <div class="card-item" style="margin-bottom: 1rem;">
    Content here
  </div>
</div>

Use Bootstrap’s spacing utilities (p-*, m-*) on inner elements, not on the column itself.

Gutters

Bootstrap 5 introduced gutter utilities to control spacing between columns:

<!-- No gutters -->
<div class="row g-0">
  <div class="col-6">No gap</div>
  <div class="col-6">No gap</div>
</div>

<!-- Specific gutter size (1-5) -->
<div class="row g-3">
  <div class="col-md-4">Gap of 1rem</div>
  <div class="col-md-4">Gap of 1rem</div>
  <div class="col-md-4">Gap of 1rem</div>
</div>

<!-- Horizontal and vertical gutters separately -->
<div class="row gx-4 gy-2">
  <div class="col-md-6">Horizontal gap 1.5rem, vertical 0.5rem</div>
  <div class="col-md-6">...</div>
</div>

Alignment

<!-- Vertical alignment of the row -->
<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>

<!-- Vertical alignment of individual column -->
<div class="row">
  <div class="col align-self-start">Top</div>
  <div class="col align-self-center">Middle</div>
  <div class="col align-self-end">Bottom</div>
</div>

<!-- Horizontal alignment -->
<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-around">...</div>
<div class="row justify-content-evenly">...</div>

Offsetting Columns

<!-- Push a column right by N columns -->
<div class="row">
  <div class="col-md-4 offset-md-4">Centered column</div>
</div>

<!-- Different offsets at different breakpoints -->
<div class="row">
  <div class="col-sm-5 col-md-6">...</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">...</div>
</div>

Nesting

Rows can be nested inside columns:

<div class="row">
  <div class="col-sm-9">
    Level 1 column
    <div class="row">
      <div class="col-8 col-sm-6">Nested column</div>
      <div class="col-4 col-sm-6">Nested column</div>
    </div>
  </div>
  <div class="col-sm-3">Sidebar</div>
</div>

Practical: Address Book Layout

A real-world example — a responsive address book where cards are full-width on mobile and two-per-row on desktop:

<div class="container">
  <h3 class="text-center">Address Book</h3>
  <hr>
  <a href="/addresses/new" class="btn btn-primary mb-3">Add Address</a>

  <div class="row g-3">
    <!-- Each address card -->
    <div class="col-12 col-md-6">
      <div class="address-card p-3 border rounded bg-light">
        <p class="mb-2">123 Main Street, Springfield, IL 62701</p>
        <div class="d-flex gap-2">
          <a href="/addresses/1/edit" class="btn btn-primary btn-sm">Edit</a>
          <a href="/addresses/1" data-method="delete"
             class="btn btn-danger btn-sm">Delete</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6">
      <div class="address-card p-3 border rounded bg-light">
        <p class="mb-2">456 Oak Avenue, Portland, OR 97201</p>
        <div class="d-flex gap-2">
          <a href="/addresses/2/edit" class="btn btn-primary btn-sm">Edit</a>
          <a href="/addresses/2" data-method="delete"
             class="btn btn-danger btn-sm">Delete</a>
        </div>
      </div>
    </div>
  </div>
</div>

// SCSS for the address cards
.address-card {
  height: 100%;  // equal height cards in a row

  p {
    font-size: 0.95rem;
    color: #333;
  }
}

Common Layout Patterns

<div class="container">
  <div class="row">
    <main class="col-12 col-lg-8">
      Main content
    </main>
    <aside class="col-12 col-lg-4">
      Sidebar
    </aside>
  </div>
</div>

Three-Column Card Grid

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

Centered Content

<div class="container">
  <div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-6">
      Centered, max 6 columns wide on large screens
    </div>
  </div>
</div>

Bootstrap 5 vs Bootstrap 4 Grid Differences

Feature	Bootstrap 4	Bootstrap 5
Gutter control	`.no-gutters`	`g-0`, `g-1`…`g-5`
RTL support	No	Yes
`xxl` breakpoint	No	Yes (≥1400px)
Flexbox	Yes	Yes
jQuery dependency	Yes	No