Bootstrap Containers

Containers are the most basic layout element in Bootstrap. Every grid layout must be wrapped in a container.

.container — Fixed Width

The .container class creates a responsive, fixed-width container that centres on the page:

<div class="container">
    <h1>Fixed-width container</h1>
    <p>This container has a max-width that changes at breakpoints.</p>
</div>

It has specific max-width values at each breakpoint:

• Extra small (<768px): 100% width
• Small (≥768px): 750px
• Medium (≥992px): 970px
• Large (≥1200px): 1170px

.container-fluid — Full Width

The .container-fluid class spans the entire width of the viewport:

<div class="container-fluid">
    <h1>Full-width container</h1>
    <p>This container stretches to fill the entire viewport width.</p>
</div>

When to Use Which

• .container — most common, for centred content with max widths
• .container-fluid — for full-width layouts like dashboards or hero sections

Common Pattern

<!-- Full-width hero section -->
<div class="container-fluid" style="background: #3498db;">
    <div class="container">
        <h1>Welcome</h1>
    </div>
</div>

<!-- Centred content section -->
<div class="container">
    <div class="row">
        <div class="col-md-8">Main</div>
        <div class="col-md-4">Sidebar</div>
    </div>
</div>

Important: Do NOT nest containers inside each other.