Container
Containers are fundamental layout components in Responsive Style, required when using default grid system. They contain, pad, and center content. While nesting is possible, most layouts don't require nested containers.
Three container types available:
.container: Setsmax-widthat each breakpoint.{breakpoint}:container:width: 100%until specified breakpoint.container-fluid: Full-width at all breakpoints
Comparison table showing max-width behavior:
| xs(<576px) | sm(≥576px) | md(≥768px) | lg(≥992px) | xl(≥1200px) | |
|---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px |
.sm:container | 100% | 540px | 720px | 960px | 1140px |
.md:container | 100% | 100% | 720px | 960px | 1140px |
.lg:container | 100% | 100% | 100% | 960px | 1140px |
.xl:container | 100% | 100% | 100% | 100% | 1140px |
.container-fluid | 100% | 100% | 100% | 100% | 100% |