Nearby lessons
3 of 39📦 BS5 Containers
📌 What Are Bootstrap 5 Containers?
Containers are the base layout element. They center content and add horizontal padding. Use .container for responsive fixed-width, .container-fluid for full-width, or .container-{breakpoint} (e.g. .container-md) to be 100% width until that breakpoint.
📦 Standard Container (.container)
.container – responsive fixed-width container. Widths: 100% on XS, 540px on SM (≥576px), 720px on MD (≥768px), 960px on LG (≥992px), 1140px on XL (≥1200px), 1320px on XXL (≥1400px). Centers content and adds horizontal padding.
🌊 Fluid Container (.container-fluid)
.container-fluid – full-width container (100% of viewport) on all screen sizes. Use when you want content to span edge-to-edge.
📱 Responsive Containers (.container-md, .container-lg, etc.)
.container-sm, .container-md, .container-lg, .container-xl, .container-xxl – 100% width until the specified breakpoint, then fixed-width like .container. Example: .container-md is 100% on XS/SM, then 720px on MD+.
✅ Container Best Practices
- Use .container for most layouts (centered, responsive).
- Use .container-fluid for full-width sections (hero, banners).
- Use .container-{breakpoint} when you need 100% width only on small screens.