Container, rows and columns

The Bootstrap grid lays page content out in columns. It is built from three classes: a container limits the page width, a row (row) groups columns, and a column (col) holds content. Under the hood it is the flexbox you know from the tutorial, but you do not have to write it by hand.

The container

The container class sets a maximum content width and centers it. The width grows in steps with the screen: 540, 720, 960, 1140 and 1320 pixels. The container-fluid class stretches the block to full width.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container bg-light border py-3">Regular container</div>
<div class="container-fluid bg-light border py-3 mt-2">Full-width container</div>

In the narrow preview both blocks look almost the same; open the example in a wide window and the first one stops at a fixed width. The bg-light, border, py-3 and mt-2 classes here and below only highlight the blocks; they are covered in the utilities chapter.

Rows and columns

Columns go into a row, and the row goes into a container. Columns with the col class share the width equally:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col border bg-light py-2">Tasks</div>
    <div class="col border bg-light py-2">Projects</div>
    <div class="col border bg-light py-2">Team</div>
  </div>
</div>

Three columns stand side by side, each taking a third of the row. Add a fourth and each becomes a quarter.

Twelve parts

A row is divided into 12 equal parts. The col-4 class takes 4 parts of 12, a third; col-8 takes two thirds:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="container">
  <div class="row">
    <div class="col-8 border bg-light py-2">Task list</div>
    <div class="col-4 border bg-light py-2">Filters</div>
  </div>
  <div class="row">
    <div class="col-3 border bg-light py-2">Menu</div>
    <div class="col border bg-light py-2">Rest of the row</div>
  </div>
</div>

In the second row col-3 takes a quarter, and col without a number takes everything left. The col-auto class would make a column as wide as its content.

If the parts add up to more than 12, the extra columns wrap to a new line.

Columns inside columns

The grid can be nested: inside a column you create a new row, and it is again split into 12 parts of that column's width. This is how, for example, a row of stat cards is placed inside the main column of the admin dashboard.

Common mistake

Putting columns straight into a container without a row, or putting content straight into a row. A row has negative side margins and columns have padding, and together they give even edges. Without this pair the columns do not line up or shift sideways. The order is always the same: container, then row, then columns, then content.