Blog Post Title
Blog content goes here...
Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Bootstrap 5 Layout System
Containers are the most basic layout element in Bootstrap and are required when using the default grid system.
What is a Container?
Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
Types of Containers
.container
Responsive fixed-width container
.container
<div class="container"></div>.container-fluid
Full width container, spanning the entire width
.container-fluid
<div class="container-fluid"></div>Responsive Containers
Containers that are 100% wide until a breakpoint
.container-sm.container-md.container-lg.container-xl.container-xxl
Container Widths
Container Max-widths
| Container | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | X-Large ≥1200px | XX-Large ≥1400px |
|---|---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm | 100% | 540px | 540px | 540px | 540px | 540px |
.container-md | 100% | 100% | 720px | 720px | 720px | 720px |
.container-lg | 100% | 100% | 100% | 960px | 960px | 960px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1140px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
Responsive Containers in Action
Live Examples
Example 1: .container-md
This container is fluid until the md breakpoint (768px), then becomes fixed width.
<div class="container-md">
<!-- Content -->
</div>Example 2: Nested Containers
Nested Container 1
Nested Container 2
<div class="container-fluid">
<div class="container">Content 1</div>
<div class="container">Content 2</div>
</div>Common Layout Patterns
Centered Layout
Centered Content
Use .container for centered, fixed-width layouts.
Full-width Layout
Full-width Content
Use .container-fluid for edge-to-edge designs.
Breakpoint-based Containers
.container-smFluid → 540px at sm
.container-mdFluid → 720px at md
.container-lgFluid → 960px at lg
.container-xlFluid → 1140px at xl
Container Padding and Gutters
Container Spacing
Containers have built-in horizontal padding. You can adjust this with utility classes:
No horizontal padding
<div class="container px-0"></div>Extra horizontal padding
<div class="container px-5"></div>Default Container Padding: Containers have
padding-right: 12px and padding-left: 12px by default at all breakpoints.When to Use Which Container
| Use Case | Recommended Container | Example |
|---|---|---|
| Blog, News Site | .container | Medium.com, blogs |
| Admin Dashboard | .container-fluid | Analytics dashboards |
| Landing Page | .container or .container-fluid | Marketing pages |
| E-commerce Product Page | .container | Amazon product pages |
| Portfolio Website | .container-fluid | Creative portfolios |
| Web Application | .container-fluid | Gmail, Trello |
Practical Examples
Example 1: Blog Layout
My Blog
<div class="container">
<header>...</header>
<div class="row">
<main class="col-md-8">...</main>
<aside class="col-md-4">...</aside>
</div>
<footer>...</footer>
</div>Example 2: Dashboard Layout
Dashboard
Card 1
Card 2
<div class="container-fluid">
<div class="row">
<nav class="col-md-2">Sidebar</nav>
<main class="col-md-10">Main Content</main>
</div>
</div>Container Best Practices
Do's and Don'ts
✅ Do:
- Use containers for main content sections
- Choose container type based on design needs
- Use breakpoint containers for responsive behavior
- Combine with grid system for complex layouts
❌ Don't:
- Nest containers unnecessarily
- Use containers for every element
- Forget to close container tags
- Mix container types without reason
Common Issues and Solutions
| Issue | Solution |
|---|---|
| Content touching edges on mobile | Use .container instead of .container-fluid |
| Too much white space on desktop | Use .container-fluid or responsive containers |
| Layout breaking at specific screen sizes | Use appropriate breakpoint container |
| Nested containers causing double padding | Avoid nesting containers, use rows and columns instead |
