Bootstrap 5: The Grid System

Bootstrap Grid is a way to divide a page into columns. It’s based on a 12-column grid: any row can be split into parts that add up to 12.

Basic Structure

The grid uses three classes: container, row, col-*.

<div class="container">
  <div class="row">
    <div class="col-4">Left column</div>
    <div class="col-4">Center column</div>
    <div class="col-4">Right column</div>
  </div>
</div>

col-4 + col-4 + col-4 = 12 — the columns fill the full row width. You can split differently: col-3 + col-9, col-6 + col-6, etc.

Breakpoints

Bootstrap includes five breakpoints:

Classes work from the bottom up: col-md-6 means “6 columns from tablet and wider, full width on mobile.”

Responsive Columns

<div class="row">
  <!-- Full width on mobile, half on tablet, one-third on desktop -->
  <div class="col-12 col-md-6 col-lg-4">Card 1</div>
  <div class="col-12 col-md-6 col-lg-4">Card 2</div>
  <div class="col-12 col-md-6 col-lg-4">Card 3</div>
</div>

Rule: Multiple col-* classes on one element set the width for different screen sizes.

Auto-width Columns

If you don’t specify a number, Bootstrap divides space equally:

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

Three col elements — each takes one-third of the row.

Column Offset

<div class="row">
  <div class="col-md-6 offset-md-3">
    Centered content (skips 3 columns on the left)
  </div>
</div>

offset-md-3 shifts the element three columns to the right. Works with all breakpoints: offset-lg-2, offset-sm-1, etc.

Nested Grids

Grids can be nested — place a new row inside a column:

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-6">Nested left</div>
      <div class="col-6">Nested right</div>
    </div>
  </div>
  <div class="col-md-4">Sidebar</div>
</div>

Example: DevBlog Card Grid

Three cards per row on desktop, one card per row on mobile:

<div class="container py-4">
  <div class="row g-4">
    <!-- g-4 sets the gap between cards (gutters) -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Article 1</h5>
          <p class="card-text">A short description of the blog post.</p>
          <a href="#" class="btn btn-primary">Read</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Article 2</h5>
          <p class="card-text">A short description of the blog post.</p>
          <a href="#" class="btn btn-primary">Read</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Article 3</h5>
          <p class="card-text">A short description of the blog post.</p>
          <a href="#" class="btn btn-primary">Read</a>
        </div>
      </div>
    </div>
  </div>
</div>

Behavior:
- Phone: 1 card per row (col-12)
- Tablet: 2 cards per row (col-md-6)
- Desktop: 3 cards per row (col-lg-4)

Alignment Inside a Row

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

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

These classes are Flexbox wrappers — a row in Bootstrap is a flex container.