Containers
A container is the outermost wrapper of a Bootstrap layout. It centres your content, adds padding at the sides, and limits how wide a line of content gets on large screens.
<div class="container bg-primary-subtle border border-primary py-3 my-2">
<code>.container</code>: centred, with a maximum width that steps up at each breakpoint
</div>
<div class="container-fluid bg-success-subtle border border-success py-3 my-2">
<code>.container-fluid</code>: always the full width of the screen
</div>
<div class="container-md bg-warning-subtle border border-warning py-3 my-2">
<code>.container-md</code>: full width until the md breakpoint, then like .container
</div>The three kinds
| Class | Width |
|---|---|
.container | a fixed maximum width that grows at each breakpoint |
.container-fluid | always 100% of the width |
.container-sm, -md, -lg, -xl, -xxl | 100% wide until that breakpoint, then fixed like .container |
The breakpoints
.container changes its maximum width as the screen grows:
| Screen width | Breakpoint | .container max width |
|---|---|---|
| under 576px | (none) | 100% |
| 576px and up | sm | 540px |
| 768px and up | md | 720px |
| 992px and up | lg | 960px |
| 1200px and up | xl | 1140px |
| 1400px and up | xxl | 1320px |
These same breakpoint names appear throughout Bootstrap: in the grid (col-md-6), in display utilities (d-lg-none) and in components (navbar-expand-lg). On a desktop, this lesson's preview is about 780px wide, so md styles apply and lg ones don't.
A typical page
<header class="bg-dark text-white py-3">
<div class="container d-flex justify-content-between align-items-center">
<strong>CodeMIRAI</strong>
<span class="small">Learn to code</span>
</div>
</header>
<main class="container py-4">
<h1 class="h3">Welcome back</h1>
<p class="text-body-secondary">The header's background stretches edge to edge, but its content lines up with the page content below, because both sit inside a <code>.container</code>.</p>
</main>Put full-width backgrounds on an outer element, and a .container inside it. The colour reaches the screen edges, while the text lines up with the rest of the page.
Containers hold rows
<div class="container text-center">
<div class="row g-2">
<div class="col"><div class="p-3 bg-info-subtle border">col</div></div>
<div class="col"><div class="p-3 bg-info-subtle border">col</div></div>
<div class="col"><div class="p-3 bg-info-subtle border">col</div></div>
</div>
</div>The grid expects this order: container → row → columns. The container's padding and the row's negative margins are designed to cancel out, so columns line up exactly with other content. A row placed outside a container sticks out slightly at the edges.