# The Grid System

Lay out a page in Bootstrap's 12-column grid of containers, rows and columns, and make the layout change at each screen size with breakpoints.

Apprentice · CSS · HTML · Web Development · Updated November 3, 2026

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

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

| Class | Is |
|---|---|
| `container` | the outer box: centered, with a maximum width that suits the screen |
| `row` | one horizontal band of columns |
| `col` | one column in the row |

Three `col`s 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:

```html
<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:

| Infix | Screen width | Typical device |
|---|---|---|
| (none) | any | phones and up |
| `sm` | 576px and wider | large phones |
| `md` | 768px and wider | tablets |
| `lg` | 992px and wider | laptops |
| `xl` | 1200px and wider | desktops |
| `xxl` | 1400px and wider | large desktops |

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

```html
<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:

```html
<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:

```html
<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](https://www.ask-codey.com/glossary/bootstrap-grid)
- [Breakpoint](https://www.ask-codey.com/glossary/breakpoint-c-sharp)
- [Mobile-first design](https://www.ask-codey.com/glossary/mobile-first-design)

## Cheat sheets

- [The Grid System](https://www.ask-codey.com/cheat-sheets/bootstrap-the-grid-system-cheat-sheet)

Source: https://www.ask-codey.com/lessons/bootstrap-the-grid-system