Containers
Learn how Bootstrap containers wrap and constrain your content, and the difference between .container and .container-fluid.
Introduction
Before you can use Bootstrap's grid system, you need to understand containers, the outermost wrapping element that every Bootstrap layout starts with. Containers control the maximum width of your content and add consistent side padding, forming the foundation that rows and columns are built on top of.
- What a Bootstrap container does.
- The difference between .container and .container-fluid.
- How responsive containers change width at different breakpoints.
- Why the grid system requires a container to work correctly.
What is a Container?
A container is a `<div>` with a Bootstrap class, either `.container` or `.container-fluid`, applied to it. Its job is simple: it centers your page content horizontally, adds left and right padding so content does not touch the edges of the screen, and (in the case of `.container`) sets a maximum width that changes at different screen sizes.
The .container Class
The `.container` class creates a fixed-width container, meaning its maximum width changes at specific breakpoints but stays constant within each range, and is always centered on the page with equal margins on both sides.
<div class="container"> <h1>Welcome to My Site</h1> <p>This content is centered with a maximum width that changes at each breakpoint.</p></div>Click Run to see what this code prints.
The .container-fluid Class
The `.container-fluid` class creates a full-width container. It always spans 100% of the viewport width at every screen size, only adding the standard side padding, with no maximum width cap.
<div class="container-fluid"> <h1>Full-Width Section</h1> <p>This content always stretches across the entire width of the browser window.</p></div>Click Run to see what this code prints.
Responsive Containers
Bootstrap also offers responsive containers, like `.container-sm`, `.container-md`, `.container-lg`, `.container-xl`, and `.container-xxl`. Each one is 100% wide until it reaches the breakpoint named in its class, at which point it becomes a fixed, centered width, just like `.container`, but only starting at that breakpoint.
| Class | Behavior |
|---|---|
| .container | Fixed max-width at every breakpoint (sm and up) |
| .container-sm | 100% wide below sm, fixed width from sm and up |
| .container-md | 100% wide below md, fixed width from md and up |
| .container-lg | 100% wide below lg, fixed width from lg and up |
| .container-fluid | Always 100% wide, no maximum width |
Why the Grid Needs a Container
Bootstrap's grid system uses negative margins on its `.row` element to offset the padding added by its `.col-*` children, so the columns line up perfectly at the edges. This spacing math is designed around being placed inside a `.container` or `.container-fluid`. If you place a `.row` directly on the page without a container, the negative margins can cause the row to overflow slightly and create an unwanted horizontal scrollbar.
<div class="container"> <div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div> <div class="col">Column 3</div> </div></div>Click Run to see what this code prints.
Common Mistakes
- Using a `.row` without wrapping it in a `.container` or `.container-fluid` first.
- Nesting a `.container` class inside another `.container`, which creates unwanted double padding (nest `.row` and `.col` instead).
- Expecting `.container` to stretch full width, when `.container-fluid` is what you actually want.
- Forgetting that `.container`'s max-width changes at each breakpoint, causing unexpected width jumps if not accounted for.
Best Practices
- Always wrap grid rows in a container, either `.container` or `.container-fluid`.
- Use `.container` for typical centered page layouts like blogs, marketing pages, and forms.
- Use `.container-fluid` for dashboards, full-width heroes, or edge-to-edge sections.
- Use responsive containers like `.container-lg` when you want full width on mobile but a constrained width on larger screens.
Frequently Asked Questions
Yes. It is common to use multiple containers stacked vertically, for example a full-width `.container-fluid` hero section followed by a centered `.container` for the main content.
No, by default a container only adds horizontal padding and centers content; it does not add top or bottom margin or padding on its own.
Your rows and columns may still display, but the padding and negative margins used internally by the grid can cause misalignment or a horizontal scrollbar.
Key Takeaways
- A container is the outermost wrapper that every Bootstrap grid layout needs.
- .container has a responsive maximum width and stays centered on the page.
- .container-fluid always spans 100% of the viewport width.
- Responsive containers like .container-md combine both behaviors at a chosen breakpoint.
Summary
Containers are the starting point of every Bootstrap layout, giving your content consistent width and padding. Now that you know how to wrap your layout correctly, the next lesson introduces the heart of Bootstrap: the 12-column grid system built from rows and columns.