The Grid System

After this lesson you can

• Lay out a responsive page with Bootstrap's containers, rows and columns

Key takeaways

• The grid always nests in the same order: a container, then a row, then its columns.
• Every row has 12 columns, and a col-* class says how many a column spans, so the numbers in a row should add up to 12.
• A breakpoint class such as col-md-8 applies from that screen width up. Below it, the column takes the full width and the columns stack.
• Mobile-first means starting with the phone layout, such as col-12, then saying what changes as the screen grows, such as col-md-8.
• g-0 to g-5 set the gutter between columns, and a column can hold a row of its own, split into 12 again.

Bootstrap's grid is the frame most Bootstrap pages hang on. It's built from three kinds of element, always nested in this order:

<div class="container">
    <div class="row">
        <div class="col">One</div>
        <div class="col">Two</div>
        <div class="col">Three</div>
    </div>
</div>

Three cols share the row's width equally, side by side.

Twelve columns

Every row is divided into 12 equal columns. A col-* class says how many of the 12 a column spans:

<div class="container">
    <div class="row">
        <div class="col-8">Main content: 8 of 12, two-thirds</div>
        <div class="col-4">Sidebar: 4 of 12, one-third</div>
    </div>
    <div class="row">
        <div class="col-6">Half</div>
        <div class="col-3">Quarter</div>
        <div class="col-3">Quarter</div>
    </div>
</div>

The numbers in a row should add up to 12. Twelve is used because it divides so many ways: halves, thirds, quarters and sixths.

Breakpoints: different layouts for different screens

A two-thirds and one-third layout is fine on a laptop, and cramped on a phone. Breakpoints let a column take a different width depending on how wide the screen is:

col-md-8 means "8 columns wide from the md breakpoint up". Below it, the column takes the full width, so the columns stack:

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

On a phone, the sidebar sits under the main content; on a tablet or wider, they're side by side. Make your browser window narrower and wider to watch it change. This is mobile-first: start with the phone layout (col-12), then say what changes as the screen grows (col-md-8).

A row of product cards often uses three breakpoints at once:

<div class="row">
    <div class="col-12 col-sm-6 col-lg-3">Product 1</div>
    <div class="col-12 col-sm-6 col-lg-3">Product 2</div>
    <div class="col-12 col-sm-6 col-lg-3">Product 3</div>
    <div class="col-12 col-sm-6 col-lg-3">Product 4</div>
</div>

One per row on a phone, two on a large phone or tablet, and four on a laptop.

Gutters and nesting

The space between columns is the gutter. g-0 removes it, and g-1 to g-5 set it from small to large: <div class="row g-4">.

A column can hold a row of its own, which is split into 12 again:

<div class="row">
    <div class="col-md-8">
        <div class="row">
            <div class="col-6">Half of the main column</div>
            <div class="col-6">The other half</div>
        </div>
    </div>
    <div class="col-md-4">Sidebar</div>
</div>

Check yourself

2 questions to try on the lesson page.

So what

With containers, rows, 12 columns and breakpoints, one page can lay itself out well on every screen, and you describe the layout with nothing but class names.

Key terms

• Bootstrap Grid
• Breakpoint
• Mobile-first design

Cheat sheets

• The Grid System