Containers, Rows, and Columns

Almost every layout in Bootstrap is built from the same three pieces, nested in the same order: a container, one or more rows, and columns inside each row.

<div class="container">
  <div class="row">
    <div class="col">Left</div>
    <div class="col">Middle</div>
    <div class="col">Right</div>
  </div>
</div>

Why a container first

A .container centers your content and applies responsive max-width and side padding, so your layout doesn't stretch edge-to-edge on a wide monitor. Bootstrap actually offers three variants:

• .container — a fixed max-width that changes at each breakpoint (narrower on tablets, wider on desktops).
• .container-fluid — always 100% wide, no max-width at all.
• .container-{breakpoint} (e.g. .container-md) — fluid below that breakpoint, fixed-width at and above it.

Everything grid-related should live inside one of these — rows rely on a negative margin to counteract the container's padding, so a row placed outside a container will look slightly misaligned.

The 12-column system

A .row is a flexbox container, and each .col-* inside it is a flex item. Bootstrap divides every row into 12 equal columns, and you tell each element how many of those 12 units to span:

<div class="container">
  <div class="row">
    <div class="col-4">Sidebar (4/12)</div>
    <div class="col-8">Main content (8/12)</div>
  </div>
</div>

col-4 plus col-8 adds up to 12, so the two elements exactly fill the row. You aren't required to make the numbers add up, though — if columns in a row exceed 12 total width units, the extras wrap onto a new line automatically, which is useful for repeating grids like a list of product cards.

Equal-width columns

If you use .col without a number, Bootstrap splits the remaining space evenly among however many .col elements you have:

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

Add three .col elements and each gets a third of the row; add four and each gets a quarter — no math required on your part.

Gutters

The gap between columns (called a "gutter") is controlled separately from the column widths, using .g-* classes on the row:

<div class="row g-4">
  <div class="col-6">A</div>
  <div class="col-6">B</div>
</div>

g-4 adds both horizontal and vertical gutter spacing; gx-* and gy-* control horizontal and vertical gutters independently, which matters once a row wraps onto multiple lines.

This container → row → column nesting is the skeleton behind nearly every Bootstrap layout you'll build, from a two-column blog post to a full dashboard — the next lesson covers how these column widths adapt across screen sizes.