Bootstrap Containers and Grid
Bootstrap's grid lets you build layouts in rows and columns that change with the screen size.
Containers
Every layout starts with a container. It holds your content and adds space on the sides.
| Class | Width |
|---|---|
container | A fixed maximum width that grows at each breakpoint, centred |
container-fluid | Always 100% of the screen width |
container-md | 100% wide until the md breakpoint, then fixed |
Rows and Columns
The grid has 12 columns. Inside a container, put a row, and inside the row put columns. A column's number says how many of the 12 parts it takes.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.col, [class*="col-"] { background: #ede7f6; border: 1px solid #7952b3; padding: 10px; }
</style>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-4">col-4</div>
<div class="col-8">col-8</div>
</div>
<div class="row mt-2">
<div class="col-6">col-6</div>
<div class="col-3">col-3</div>
<div class="col-3">col-3</div>
</div>
<div class="row mt-2">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
</body>
</html>The small <style> only colours the columns so you can see them. A plain col shares the space equally with the other columns in its row.
The numbers in a row should add up to 12. If they add up to more, the extra columns move down to a new line.
Breakpoints
Add a breakpoint to a column class to decide from which screen size it applies.
| Breakpoint | Class prefix | Screen width |
|---|---|---|
| Extra small | col- | Under 576px |
| Small | col-sm- | 576px and up |
| Medium | col-md- | 768px and up |
| Large | col-lg- | 992px and up |
| Extra large | col-xl- | 1200px and up |
| Extra extra large | col-xxl- | 1400px and up |
col-md-6 means "half the width from 768px upwards". Below 768px, the column takes the full width, so columns stack on phones.
A Responsive Layout
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<div class="row g-3">
<div class="col-12 col-sm-6 col-lg-3">
<div class="p-3 bg-light border rounded">Clifton</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="p-3 bg-light border rounded">Gulshan</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="p-3 bg-light border rounded">Orangi Town</div>
</div>
<div class="col-12 col-sm-6 col-lg-3">
<div class="p-3 bg-light border rounded">Saddar</div>
</div>
</div>
</div>
</body>
</html>| Screen | Columns per row |
|---|---|
| Phone | 1 (each is col-12) |
| 576px and up | 2 (col-sm-6) |
| 992px and up | 4 (col-lg-3) |
Gutters
Gutters are the gaps between columns. Change them with g-0 to g-5 on the row. gx- changes only the horizontal gap and gy- only the vertical gap. In the example above, g-3 gives a medium gap in both directions.
Row Columns Shortcut
row-cols-* on the row sets how many columns appear per line, without classes on each column:
Example
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">Card 1</div>
<div class="col">Card 2</div>
<div class="col">Card 3</div>
</div>Offsets and Alignment
offset-md-2pushes a column 2 columns to the rightjustify-content-centeron a row centres columns that do not fill all 12 partsalign-items-centeron a row lines columns up in the middle vertically
Exercise
Exercise
A column has class="col-12 col-md-4". How wide is it on a tablet that is 800px wide?