Containers and the grid
Lay out pages in rows and up to 12 columns with container, row and col.
Containers
| Class | Width |
|---|---|
| container | A fixed maximum width at each screen size, centred |
| container-fluid | Always the full width of the screen |
| container-md | Full width on small screens, fixed from medium up |
Rows and columns
The grid has three parts: a container holds rows, and each row holds columns (col). Columns in a row share the space equally.
<div class="container text-center">
<div class="row">
<div class="col border p-3">One</div>
<div class="col border p-3">Two</div>
<div class="col border p-3">Three</div>
</div>
</div>The 12-column system
Every row is divided into 12 equal parts. col-6 takes half (6 of 12), col-4 a third, col-3 a quarter.
<div class="container">
<div class="row">
<div class="col-8 bg-primary-subtle p-3">Main content (8)</div>
<div class="col-4 bg-warning-subtle p-3">Sidebar (4)</div>
</div>
<div class="row mt-2">
<div class="col-3 bg-info-subtle p-3">3</div>
<div class="col-6 bg-success-subtle p-3">6</div>
<div class="col-3 bg-info-subtle p-3">3</div>
</div>
</div>Gutters
The space between columns is the gutter. Change it with g-0 (none) up to g-5 on the row.
<div class="container">
<div class="row g-4">
<div class="col-6"><div class="p-3 border bg-light">With a big gutter</div></div>
<div class="col-6"><div class="p-3 border bg-light">between columns</div></div>
</div>
</div>Exercise
Build a row with a narrow left column (3 of 12) for a menu and a wide right column (9 of 12) for content.
<div class="container">
<div class="row">
</div>
</div>Show a possible solution
<div class="container">
<div class="row">
<div class="col-3 bg-light p-3">Menu</div>
<div class="col-9 p-3">Content</div>
</div>
</div>Check your understanding
Quick check
How many columns does a Bootstrap row have?
Why: The grid is based on 12.
Quick check
Which class makes a column half the row?
Why: 6 of 12 = half.
Quick check
What must hold the columns?
Why: container > row > col.