CONTAINER SYSTEM: Complete reference for layout containers
VARIANTS: Fixed-Width | Fluid | Responsive Breakpoint-Based
Containers are the foundation of your page layout. They center content, provide consistent padding, and adapt to different screen sizes for optimal reading width and user experience.
Fixed-Width Container
.container: Responsive fixed-width container that centers content with max-widths optimized for each breakpoint. Automatically adjusts padding for comfortable spacing on all screen sizes.
.container
This container has responsive max-widths and centers content. Resize your browser to see it adapt at different breakpoints (540px → 720px → 960px → 1140px → 1280px).
Responsive Max-Widths
<div class="container">Your content here</div>
Fluid Container
.container-fluid: Full-width container that spans 100% of the viewport at all breakpoints. Same responsive padding as fixed container, but no max-width constraints. Use for full-width layouts, heroes, or edge-to-edge designs.
Comparison: Fixed vs Fluid
.container (Fixed-Width)
Centered with max-width constraints at each breakpoint
.container-fluid (Full-Width)
Spans 100% width at all screen sizes, no max-width
<div class="container-fluid">Full-width content</div>
Responsive Breakpoint-Based Containers
Responsive Containers: Containers that are 100% width (fluid) until a specific breakpoint, then become fixed-width and centered. Perfect for mobile-first designs where you want full-width layout on small screens but centered content on larger screens.
.container-sm
Activates at 640px (sm breakpoint)
100% width below 640px, then fixed-width and centered
.container-sm
.container-md
Activates at 768px (md breakpoint)
100% width below 768px, then fixed-width and centered
.container-md
.container-lg
Activates at 1024px (lg breakpoint)
100% width below 1024px, then fixed-width and centered
.container-lg
.container-xl
Activates at 1280px (xl breakpoint)
100% width below 1280px, then fixed-width and centered
.container-xl
.container-2xl
Activates at 1536px (2xl breakpoint)
100% width below 1536px, then fixed-width and centered
.container-2xl
Breakpoint Activation Table
| Class | Breakpoint | Behavior Below | Behavior Above |
|---|---|---|---|
| .container-sm | 640px (sm) | 100% width | Fixed & centered |
| .container-md | 768px (md) | 100% width | Fixed & centered |
| .container-lg | 1024px (lg) | 100% width | Fixed & centered |
| .container-xl | 1280px (xl) | 100% width | Fixed & centered |
| .container-2xl | 1536px (2xl) | 100% width | Fixed & centered |
<div class="container-sm">...</div><div class="container-md">...</div><div class="container-lg">...</div>Usage Examples & Best Practices
When to use each container type: Choose based on your layout needs and content width requirements.
✅ Standard Content Pages
Use .container for articles, forms, documentation
<div class="container">Main content</div>
✅ Full-Width Layouts
Use .container-fluid for dashboards, maps, data tables, edge-to-edge designs
<div class="container-fluid">Dashboard</div>
✅ Mobile-First Responsive Design
Use .container-md for mobile-full, desktop-centered layouts
<div class="container-md">Responsive content</div>
✅ Hero Sections with Centered Content
Use .container-fluid for background, nested .container for content
<div class="container-fluid bg-primary"><div class="container">Hero</div></div>
Quick Reference
Fixed-Width: .container (responsive max-widths: 540px → 720px → 960px → 1140px → 1280px)
Fluid: .container-fluid (100% width at all breakpoints)
Responsive: .container-{sm|md|lg|xl|2xl} (fluid until breakpoint, then fixed)
Breakpoints: sm:640px | md:768px | lg:1024px | xl:1280px | 2xl:1536px
Padding: Responsive (px-4 → px-6 → px-8)
Alignment: All fixed-width containers are centered with mx-auto