Bootstrap Grid System Explained

Bootstrap’s grid is the layout engine behind almost every Bootstrap page. It is a 12-column, flexbox-based system that turns responsive layouts into a few short class names. Once you understand the three pieces (container, row, column) and how breakpoints fit in, you can build any layout without writing media queries. This guide explains the whole system, from the basics to customizing it.

The short answer

Every grid layout is three nested pieces:

<div class="container">
  <div class="row">
    <div class="col">Column one</div>
    <div class="col">Column two</div>
  </div>
</div>

A container centers and pads your content, a row groups columns, and columns hold the content. That is the whole model. Everything else is options on top of it.

The 12-column model

Each row is divided into 12 equal units. A column spans some number of those units, and the numbers in a row should add up to 12 for a clean layout:

<div class="row">
  <div class="col-8">Two thirds (8 of 12)</div>
  <div class="col-4">One third (4 of 12)</div>
</div>

Twelve is used because it divides evenly into halves, thirds, quarters, and sixths, which covers most layout ratios. If columns add up to more than 12, the extra ones wrap to a new line.

Containers

The container sets the maximum width of your content and centers it. There are three kinds:

• container: a fixed, breakpoint-based max width, centered.
• container-fluid: full width at every breakpoint.
• container-{breakpoint} (like container-lg): full width until the breakpoint, then capped.

<div class="container">Centered, max-width content</div>
<div class="container-fluid">Edge-to-edge content</div>

Auto-layout columns

Use plain col and the columns share the row equally, no numbers needed:

<div class="row">
  <div class="col">Equal</div>
  <div class="col">Equal</div>
  <div class="col">Equal</div>
</div>

Add a number to size one and let the rest fill the remaining space:

<div class="row">
  <div class="col-6">Half</div>
  <div class="col">Fills the rest</div>
</div>

Use col-auto to size a column to its content rather than a fraction of the row.

Responsive columns and breakpoints

This is where the grid earns its keep. Insert a breakpoint into the class and the column takes that width from that screen size up. Below it, columns stack full width. The breakpoints are sm, md, lg, xl, and xxl:

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
  <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
  <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
</div>

That single row is full width on phones, two-up on tablets, and three-up on desktops, with no media queries. You can mix breakpoints freely on the same column. This shares the same breakpoint scale as the rest of Bootstrap, including the spacing utilities.

Alignment and offsets

Because the grid is built on flexbox, the flex alignment utilities work on rows and columns. Align columns vertically with align-items-* on the row, and horizontally with justify-content-*:

<div class="row justify-content-center align-items-center" style="height: 200px;">
  <div class="col-4">Centered column</div>
</div>

Push a column over with an offset:

<div class="row">
  <div class="col-4 offset-4">Centered by offset</div>
</div>

For the many ways to center inside the grid, see how to center a div in Bootstrap.

Gutters

Gutters are the gaps between columns. Control them with g-* (both axes), gx-* (horizontal), and gy-* (vertical), on the row, using the same 0 to 5 scale as spacing:

<div class="row g-4">
  <div class="col">Wider gaps</div>
  <div class="col">Wider gaps</div>
</div>

<div class="row g-0">
  <div class="col">No gaps</div>
  <div class="col">No gaps</div>
</div>

Nesting

A column can contain its own row to build sub-grids. The nested row gets a fresh 12 columns to divide:

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

Customizing the grid

The grid is driven by Sass variables, so you can change it globally: $grid-breakpoints defines the breakpoint names and widths, $grid-columns changes the column count (12 by default), and $grid-gutter-width sets the default gutter. Because these are regular Bootstrap variables, override them before the import, as explained in Bootstrap Sass variables explained. The fastest way to feel the effect is the bootstrap.build editor: change the gutter or breakpoints and watch a real layout reflow live, then export the result.

FAQ

How does the Bootstrap grid work?

It is a 12-column flexbox grid. Wrap content in a container, group columns in a row, and size each col from 1 to 12 units. Columns in a row should total 12, and extra columns wrap to the next line.

What are the Bootstrap 5 breakpoints?

sm (576px), md (768px), lg (992px), xl (1200px), and xxl (1400px). A class like col-md-6 applies from that width up; below it, the column stacks full width.

Do columns have to add up to 12?

For a single clean row, yes, columns should total 12. If they add up to more, the surplus wraps onto a new line, which is sometimes used intentionally for wrapping card grids.

How do I change the number of grid columns or the gutter?

Override the Sass variables before importing Bootstrap: $grid-columns for the column count and $grid-gutter-width for the default gutter. See the Sass variables guide for the correct override order.