Bootstrap Containers
Containers are the basic building block in Bootstrap layouts. They wrap your page content and give it consistent left and right padding, keeping content aligned and readable at every screen size.
Bootstrap offers three types of containers: .container (fixed max-width per breakpoint), .container-fluid (always 100% width), and .container-{breakpoint} (fluid until a specific breakpoint, then fixed).
<div class="container">...</div>
<div class="container-fluid">...</div>.container vs .container-fluid
.container has a max-width that changes at each responsive breakpoint, centering your content. .container-fluid always spans the full width of the viewport.
Responsive containers
Classes like .container-md are 100% wide until the medium breakpoint, then become a fixed, centered width above it. This gives you fine control over when your layout switches from fluid to fixed.
<div class="container">
<h2>Fixed-width Container</h2>
<p>This content is centered with responsive max-widths.</p>
</div>Centered heading and paragraph with side padding.container centers content and adds padding, with its max-width changing at each breakpoint.
<div class="container-fluid bg-light">
<h2>Full-width Container</h2>
</div>A heading that spans the entire browser width.container-fluid always takes up 100% of the available width, regardless of screen size.
Key points
- Containers add consistent padding and centering to content.
- .container has responsive max-widths at each breakpoint.
- .container-fluid always spans 100% of the width.
- Every Bootstrap grid row must be placed inside a container.