The grid is the foundation of almost every Bootstrap layout. It splits the page into rows and up to twelve columns, giving a consistent, predictable way to arrange content that automatically adapts across screen sizes.

The three building blocks

  • A container wraps the page content and centres it, with sensible side margins.
  • A row holds one or more columns and clears any spacing quirks between them.
  • Columns hold the actual content and sit side by side inside a row.

A simple two-column layout

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

Without a specific width given to either column, Bootstrap splits the available space evenly between them.

Choosing exact widths

The grid is based on twelve units, so a number after col- sets how many of those twelve units a column occupies:

<div class="col-8">Main</div>
<div class="col-4">Sidebar</div>

Eight plus four adds up to twelve, so these two columns fill the row exactly, with the main area taking twice the width of the sidebar.

Responsive columns

Adding a breakpoint, such as md, changes a column's width only from that screen size upward, letting one structure serve every device:

<div class="col-12 col-md-6">Half on desktop, full on mobile</div>

Container versus container-fluid

A plain container has a maximum width and centres itself with margin on either side, which usually looks best for typical content pages. container-fluid instead always stretches to fill the full width of the screen, better suited to dashboards or layouts that want to use every available pixel.

Gutters and nesting

Bootstrap automatically adds small gaps, called gutters, between columns, and the g classes control their size, such as g-4 for larger spacing. A row can also be nested inside a column, useful for building more complex layouts like a sidebar containing its own smaller grid:

<div class="col-8">
  <div class="row">
    <div class="col-6">Nested left</div>
    <div class="col-6">Nested right</div>
  </div>
</div>

A common mistake

Columns need a row as their direct parent, and a row generally needs a container around it. Skipping the container is sometimes fine, but placing columns directly without a wrapping row often causes spacing and alignment to look subtly wrong, since row supplies the negative margin that gutters between columns depend on.