Bootstrap Grid System — The Foundation of Layouts

The Bootstrap Grid System is the backbone of every Bootstrap layout. It's a powerful, mobile-first, flexible 12-column grid that helps you build responsive layouts of any complexity. Understanding the grid is the single most important step in mastering Bootstrap.

How the Grid Works

Bootstrap's grid system uses a series of containers, rows, and columns to structure and align content. It's built with flexbox and is fully responsive.

The Three Core Components

• Container: The outermost wrapper. Centers your content and provides consistent horizontal padding.
• Row: A horizontal group of columns. Wraps columns and prevents them from overflowing.
• Column: The actual content area. Columns are children of rows and must add up to 12 (or less) per row.

Visual Structure

<div class="container">
    <div class="row">
        <div class="col"> Column 1 </div>
        <div class="col"> Column 2 </div>
        <div class="col"> Column 3 </div>
    </div>
</div>

Containers — The Foundation

Containers are the most basic layout element. They contain, pad, and center your content.

The 12-Column System

Bootstrap's grid uses 12 columns per row. You can create layouts by specifying how many columns each element should span (from 1 to 12).

Basic Column Classes

• .col — Auto-width column (distributes space evenly).
• .col-{number} — Column that spans a specific number of columns (1–12).
• .col-{breakpoint}-{number} — Column that spans a specific number at a specific breakpoint.

Example: Equal Width 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>
<!-- All columns are equal width, regardless of content. -->

Example: Specific Width Columns

<div class="row">
    <div class="col-4">col-4</div>
    <div class="col-8">col-8</div>
</div>
<!-- The first column takes 4/12 (1/3) and the second takes 8/12 (2/3). -->

Breakpoints — Making It Responsive

Bootstrap has six responsive breakpoints that let you control how your layout adapts to different screen sizes.

Responsive Column Example

This layout shows different column counts at different breakpoints:

<div class="row">
    <div class="col-12 col-md-6 col-lg-4">
        Full width on mobile, 1/2 on tablets, 1/3 on desktops
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        Full width on mobile, 1/2 on tablets, 1/3 on desktops
    </div>
    <div class="col-12 col-md-6 col-lg-4">
        Full width on mobile, 1/2 on tablets, 1/3 on desktops
    </div>
</div>

Column Ordering & Offsetting

Offset Columns

Push columns to the right using .offset-{breakpoint}-{number}.

<div class="row">
    <div class="col-4 offset-4">.col-4 .offset-4</div>
</div>
<!-- The column is centered (4 + 4 = 8, leaving 4 empty on each side). -->

Column Ordering

Change the visual order using .order-{breakpoint}-{number}.

<div class="row">
    <div class="col order-2">Second visually</div>
    <div class="col order-1">First visually</div>
</div>
<!-- The second column appears before the first. -->

Nesting Columns

You can nest rows and columns inside existing columns to create more complex layouts.

<div class="row">
    <div class="col-8">
        <div class="row">
            <div class="col-6">Nested 1</div>
            <div class="col-6">Nested 2</div>
        </div>
    </div>
    <div class="col-4">Sidebar</div>
</div>

Auto-Layout Columns

Use .col-auto to create columns that only take as much space as their content needs.

<div class="row">
    <div class="col-auto">Auto width (content size)</div>
    <div class="col">Fills remaining space</div>
</div>

Gutters

Gutters are the padding between columns. Control them with g-{number} classes.

• .g-0 — No gutters.
• .g-3 — Default gutters (1rem).
• .g-5 — Larger gutters (3rem).
• .gx-{number} — Horizontal gutters only.
• .gy-{number} — Vertical gutters only.

<div class="row g-4">
    <div class="col">Large gutters</div>
    <div class="col">Large gutters</div>
</div>

Common Layout Patterns

3-Column Layout

<div class="row">
    <div class="col">Left</div>
    <div class="col">Center</div>
    <div class="col">Right</div>
</div>

Sidebar + Main Content

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

Responsive Card Grid

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
</div>
<!-- 1 column on mobile, 2 on tablets, 3 on desktops -->

Row Columns Classes

The .row-cols-* classes let you control how many columns appear per row without explicitly setting column classes.

<!-- 2 columns on small screens, 4 on large -->
<div class="row row-cols-2 row-cols-lg-4">
    <div class="col">Item 1</div>
    <div class="col">Item 2</div>
    <div class="col">Item 3</div>
    <div class="col">Item 4</div>
</div>