Bootstrap 5 Container
A Bootstrap 5 Container is the foundational layout element that centers and horizontally pads your page content. It applies responsive max-width breakpoints so content never stretches uncomfortably wide on large screens. Use a container any time you need controlled, readable content widths — essentially wrapping every major page section.
Primary Class
.containerCommon Use Cases
- →Wrapping a site-wide navigation bar so the nav links and logo stay aligned with page body content across all screen sizes
- →Constraining a pricing section to a readable column width on ultrawide monitors, preventing text lines from becoming too long
- →Containing a multi-column feature grid inside a fluid-width hero background that bleeds edge-to-edge while keeping text columns centred
- →Scoping a checkout form layout so input fields don't stretch beyond ~960px on desktop, improving form usability and visual balance
Variants & Classes
| Variant | Description |
|---|---|
| Container Default | Standard container with Bootstrap's default styling. |
| Container Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="container">
<div class="row align-items-center py-5">
<div class="col-lg-6">
<h1 class="fw-bold">Ship faster with CanvasBuilder</h1>
<p class="lead text-muted">Generate production-ready Bootstrap 5 websites in seconds. No configuration, no boilerplate — just describe your site and go.</p>
<a href="#" class="btn btn-primary btn-lg me-2">Start building free</a>
<a href="#" class="btn btn-outline-secondary btn-lg">See examples</a>
</div>
<div class="col-lg-6 mt-4 mt-lg-0">
<img src="/assets/hero-preview.png" alt="CanvasBuilder website preview" class="img-fluid rounded shadow">
</div>
</div>
</div>Live Examples
Basic Container
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated container with custom colours
- ✓Container with interactive states
- ✓Responsive container for all screen sizes
Best Practices
Use .container-fluid for full-bleed backgrounds with inner padding
Apply .container-fluid to a section wrapper when you want a background colour or image to stretch edge-to-edge, then nest a standard .container inside it to keep text content at a readable max-width — this is the correct pattern for hero sections and coloured bands.
Choose .container-{breakpoint} to control where constraint kicks in
Classes like .container-md or .container-xl are 100% wide below that breakpoint and switch to a fixed max-width above it — useful for dashboards or data tables that benefit from full width on tablet but need capping on large monitors.
Never nest .container inside .container
Nesting containers doubles the horizontal padding (Bootstrap uses 1.5rem gutter on each side by default), which visually indents content unexpectedly; always nest .row directly inside .container instead.
Override max-widths via CSS custom properties, not overrides
Bootstrap 5 exposes --bs-gutter-x on containers, but to change max-widths target the specific breakpoint variable in _variables.scss — for example $container-max-widths: (xl: 1140px, xxl: 1280px) — rather than brute-forcing with !important in your stylesheet.