Bootstrap Containers
Learn how Bootstrap containers control width, spacing, and responsive layout. Understand the difference between .container, .container-fluid, and responsive container classes with examples you can use right away.
- What Is a Container?
- Types of Containers
- .container
- .container-fluid
- Responsive Containers
- Container Widths
- Container With Grid
- When To Use Each
- Full Example
- Try It
- Summary
- FAQ
What Is a Bootstrap Container?
A Bootstrap container is the main wrapper that controls the width and horizontal alignment of your content. It keeps your layout organized, centered, and readable across different screen sizes.
When you build a page with Bootstrap, the container is usually the first layout element inside the body. It gives the grid system the outer boundary it needs to place rows and columns correctly.
The layout hierarchy
Most Bootstrap pages follow this simple three-level structure:
Types of Bootstrap Containers
Bootstrap gives you three main container patterns. Each one solves a different layout problem.
.container - Fixed Width
The .container class creates a centered layout with a maximum width that changes at Bootstrap breakpoints. It stays full width on very small screens, then becomes progressively wider as the screen size increases.
This is the most common container for articles, landing pages, portfolios, product pages, and standard website sections where readability matters.
<div class="container"> <h1>My Website</h1> <p>This content is inside a centered fixed-width container.</p> </div>
Readable Width
The content never becomes too wide on large screens, which improves reading comfort.
Centered Layout
Bootstrap automatically centers the container using horizontal auto margins.
Responsive
The max-width changes at breakpoints so the layout adapts smoothly to screen size.
Built-in Padding
The container keeps content away from the screen edges with consistent side spacing.
.container-fluid - Full Width
The .container-fluid class always stretches to 100% of the available width. Unlike .container, it never stops growing on wide screens.
Use it when a section should fill the browser from edge to edge, such as navigation bars, hero banners, dashboards, map sections, or wide image areas.
<div class="container-fluid"> <h1>Full Width Layout</h1> <p>This section stretches across the full browser width.</p> </div>
Responsive Containers - .container-{breakpoint}
Responsive container classes let you choose the screen size where the container switches from full width to fixed width. This is helpful when you want more control than the default .container gives you.
| Class | Behavior | Full Width Below |
|---|---|---|
| .container-sm | Fixed from 576px and up | Below 576px |
| .container-md | Fixed from 768px and up | Below 768px |
| .container-lg | Fixed from 992px and up | Below 992px |
| .container-xl | Fixed from 1200px and up | Below 1200px |
| .container-xxl | Fixed from 1400px and up | Below 1400px |
<!-- Full width on smaller screens, fixed on large screens --> <div class="container-lg"> <h2>Responsive Container</h2> <p>This stays fluid on smaller screens and fixed on larger screens.</p> </div>
Bootstrap 5 Container Widths
Here are the standard maximum widths Bootstrap 5 uses for the default .container class.
| Screen Size | Breakpoint | .container Max Width |
|---|---|---|
| Extra Small | < 576px | 100% width |
| Small | ≥ 576px | 540px |
| Medium | ≥ 768px | 720px |
| Large | ≥ 992px | 960px |
| Extra Large | ≥ 1200px | 1140px |
| XXL | ≥ 1400px | 1320px |
Containers With the Grid System
Containers are usually combined with rows and columns. The container sets the outer width, the row groups content horizontally, and columns divide the space into parts.
<div class="container"> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> </div>
When To Use Each Container
.container
- Blog pages and tutorials
- Portfolio sites
- Landing page content blocks
- Product pages
- Standard readable layouts
.container-fluid
- Hero sections
- Full-width headers and footers
- Dashboards
- Full-width media sections
- Wide visual layouts
.container-{bp}
- Mobile-first responsive sections
- Tablet-specific layout changes
- Mixed-width designs
- Fine control over breakpoints
Full Page Example
This example shows how one page can use multiple container types together.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Full-width hero --> <div class="container-fluid bg-dark text-white py-5"> <h1 class="text-center">Welcome</h1> </div> <!-- Main content --> <div class="container my-5"> <div class="row"> <div class="col-md-6"> <h2>Left Column</h2> </div> <div class="col-md-6"> <h2>Right Column</h2> </div> </div> </div> <!-- Responsive section --> <div class="container-lg bg-light py-4"> <p>This section is fluid on smaller screens and fixed on larger ones.</p> </div> <!-- Full-width footer --> <div class="container-fluid bg-secondary text-white py-3 text-center"> <p>© 2026 TipsInLearning</p> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Questions About Bootstrap Containers
These are the questions beginners ask most often when learning Bootstrap layout.