Bootstrap Containers
What are Containers?
Containers are the most fundamental layout elements in Bootstrap, used to contain, pad, and align content. All Bootstrap content should be placed within containers.
Container Types
Bootstrap provides three different types of containers:
1. Fixed-width Container (.container)
The .container class provides responsive fixed-width containers.
html
<div class="container">
<h1>Fixed-width Container</h1>
<p>This container has different maximum widths at different screen sizes.</p>
</div>Breakpoint Widths
| Screen Size | Class Prefix | Container Max Width |
|---|---|---|
| Extra small | <576px | 100% |
| Small | ≥576px | 540px |
| Medium | ≥768px | 720px |
| Large | ≥992px | 960px |
| X-Large | ≥1200px | 1140px |
| XX-Large | ≥1400px | 1320px |
2. Fluid Container (.container-fluid)
The .container-fluid class provides full-width containers, spanning the entire width of the viewport.
html
<div class="container-fluid">
<h1>Fluid Container</h1>
<p>This container always occupies 100% of the viewport width.</p>
</div>3. Responsive Containers
Bootstrap also provides responsive container classes that are 100% wide until a specific breakpoint, then fixed width.
html
<!-- 100% wide until small breakpoint -->
<div class="container-sm">
<h1>Small Responsive Container</h1>
</div>
<!-- 100% wide until medium breakpoint -->
<div class="container-md">
<h1>Medium Responsive Container</h1>
</div>
<!-- 100% wide until large breakpoint -->
<div class="container-lg">
<h1>Large Responsive Container</h1>
</div>
<!-- 100% wide until extra large breakpoint -->
<div class="container-xl">
<h1>Extra Large Responsive Container</h1>
</div>
<!-- 100% wide until extra extra large breakpoint -->
<div class="container-xxl">
<h1>Extra Extra Large Responsive Container</h1>
</div>Practical Examples
Basic Container Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Container Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.demo-container {
background-color: #f8f9fa;
border: 2px solid #dee2e6;
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- Fixed-width container -->
<div class="container demo-container">
<h2>Fixed-width Container (.container)</h2>
<p>This container has different maximum widths at different screen sizes, with content centered.</p>
</div>
<!-- Fluid container -->
<div class="container-fluid demo-container">
<h2>Fluid Container (.container-fluid)</h2>
<p>This container always occupies 100% of the viewport width.</p>
</div>
<!-- Responsive container -->
<div class="container-md demo-container">
<h2>Medium Responsive Container (.container-md)</h2>
<p>100% width before medium breakpoint (768px), then fixed width.</p>
</div>
</body>
</html>Nested Containers
While not recommended, containers can be nested:
html
<div class="container-fluid">
<div class="container">
<h1>Nested Containers</h1>
<p>Outer is a fluid container, inner is a fixed-width container.</p>
</div>
</div>Containers and Grid System
Containers are typically used with Bootstrap's grid system:
html
<div class="container">
<div class="row">
<div class="col-md-6">
<h3>Left Content</h3>
<p>This is the left content.</p>
</div>
<div class="col-md-6">
<h3>Right Content</h3>
<p>This is the right content.</p>
</div>
</div>
</div>Container Padding
All containers have horizontal padding to prevent content from touching the container edges:
css
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
}Choosing the Right Container
Use .container when:
- You need content to be centered
- You want to limit content width on large screens
- Building traditional website layouts
Use .container-fluid when:
- You need full-width layout
- Building dashboards or admin interfaces
- You want to make full use of screen space
Use responsive containers when:
- You need to switch layout behavior at specific breakpoints
- You want full width on small screens, fixed width on large screens
Best Practices
- Choose the right container type: Select the most suitable container based on design requirements
- Avoid unnecessary nesting: Try to avoid container nesting unless there are special needs
- Use with grid system: Containers are typically used with rows and columns
- Maintain consistency: Keep container usage consistent within the same project
Next Steps
Now that you understand how to use Bootstrap containers, we'll next learn about the powerful grid system.