The Grid System

The 12-column grid#

Bootstrap divides horizontal space into 12 equal columns. A column class specifies how many of those 12 units an element should span:

<div class="container">
    <div class="row">
        <div class="col-4">4 of 12</div>
        <div class="col-8">8 of 12</div>
    </div>
</div>

<div class="row">
    <div class="col-3">Sidebar</div>
    <div class="col-9">Main content</div>
</div>

Using plain .col (no number) on every column in a row splits the available space equally among however many columns exist:

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

If the numbers in a row add up to more than 12, the excess columns wrap onto a new line automatically — the grid never overflows silently.

Breakpoints#

Bootstrap's column classes are breakpoint-aware: .col-{breakpoint}-{n} applies from that breakpoint's width upward, following the same mobile-first logic as CSS media queries — an unqualified .col-6 applies at every size, while .col-md-6 only kicks in from md up.

A very common responsive pattern — stacked on mobile, side-by-side from tablet width up:

<div class="row">
    <div class="col-12 col-md-6">
        Full width on mobile, half width from md up
    </div>
    <div class="col-12 col-md-6">
        Full width on mobile, half width from md up
    </div>
</div>

You can also stack breakpoints to change the layout at multiple sizes:

<div class="row">
    <div class="col-12 col-sm-6 col-lg-3">
        Full width on mobile, half on small screens, one quarter from lg up
    </div>
</div>

Gutters#

Gutters are the spacing between columns. Bootstrap 5 controls them with g-* utilities (replacing Bootstrap 4's separate padding overrides):

<div class="row g-4">
    <div class="col-6">Column with larger gutters</div>
    <div class="col-6">Column with larger gutters</div>
</div>

<div class="row gx-2 gy-4">
    <!-- gx: horizontal gutter only, gy: vertical gutter only -->
</div>

<div class="row g-0">
    <!-- no gutters at all — columns touch edge to edge -->
</div>

Offsetting columns#

.offset-{breakpoint}-{n} shifts a column to the right by n columns, without needing an empty placeholder column:

<div class="row">
    <div class="col-md-4 offset-md-4">
        A single centered column (4 wide, pushed right by 4, leaving 4 empty on the right)
    </div>
</div>

<div class="row">
    <div class="col-md-6 offset-md-3">
        A centered 6-wide column
    </div>
</div>

For simply centering a single column, mx-auto on the column (with a fixed width like col-md-6) is often simpler than computing an offset:

<div class="row">
    <div class="col-md-6 mx-auto">Centered without doing offset math</div>
</div>

Common mistakes#

• Forgetting that .row and .col-* only make sense nested inside a .container (or .container-fluid) — using columns without a container skips the intended max-width/padding behavior.
• Letting column numbers in a row add up to more than 12 without intending the wraparound — it's valid and wraps automatically, but it's an easy source of unexpected layout if done by accident.
• Using .offset-* and .col-* numbers that don't leave the row summing correctly, resulting in unintended wrapping.
• Mixing Bootstrap 4's gutter utilities (which don't exist the same way in 5) with Bootstrap 5 markup — always check gutter/spacing utility names against the specific major version in use.