Bootstrap Containers

A container wraps your content and centers it on the page with responsive horizontal padding. Bootstrap has three main options: .container (responsive max-width), .container-fluid (full width), and breakpoint-specific containers.

Containers

Use .container for most websites — it keeps text readable on large screens. Use .container-fluid for dashboards or full-bleed hero sections.

Real-life example: A container is like a tray on a dining table. The table is the full browser width; the tray keeps your plate and glass neatly in the middle with space on the sides.

container vs container-fluid

<div class="container bg-light py-3 mb-3">
  <h2>Fixed container</h2>
  <p>Max-width changes at breakpoints — content stays centered.</p>
</div>

<div class="container-fluid bg-primary text-white py-3">
  <h2>Fluid container</h2>
  <p>Always 100% width of the screen.</p>
</div>

Responsive containers

Classes like .container-sm, .container-md, .container-lg, .container-xl, and .container-xxl are 100% wide until their breakpoint, then behave like .container.

This is useful when you want edge-to-edge layout on phones but a boxed layout on desktop.

Real-life example: Responsive containers are like a window blind — fully open (wide) on a small room, but capped at a neat width when the wall is huge.

container-lg example

<div class="container-lg border p-4">
  <p>Full width on phones. Becomes a boxed layout from the lg breakpoint up.</p>
</div>