Containers

Containers

Containers are the most basic layout element in Bootstrap. They are required when using the default grid system. A container centers your content and provides horizontal padding (gutters).

The three container classes

Example: fixed width container

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This content is centered with padding.</p>
</div>

Example: full width container

<div class="container-fluid">
  <h1>Full Width</h1>
  <p>This stretches across the whole screen.</p>
</div>

Breakpoint variants

<div class="container-sm">sm</div>
<div class="container-md">md</div>
<div class="container-lg">lg</div>
<div class="container-xl">xl</div>
<div class="container-xxl">xxl</div>

These containers are full width until the specified breakpoint is reached, then they become fixed width.

Breakpoint sizes

TL;DR

• .container centers content with a responsive width.
• .container-fluid spans the full viewport width.
• .container-{breakpoint} is full width until a breakpoint.
• Containers provide horizontal padding (gutters).