A container centers and pads a band of content. Breakpoints are mobile-first min-width media queries: classes without an infix apply at every width, and a class with an infix such as md applies from that width up. .container has a max-width that grows at each breakpoint, .container-md (and the other infixes) stays 100% wide until its breakpoint, and .container-fluid is always 100%.
| Breakpoint | Class infix | Viewport width | .container max-width |
|---|---|---|---|
| Extra small | none | < 576px | 100% |
| Small | sm | ≥ 576px | 540px |
| Medium | md | ≥ 768px | 720px |
| Large | lg | ≥ 992px | 960px |
| Extra large | xl | ≥ 1200px | 1140px |
| Extra extra large | xxl | ≥ 1400px | 1320px |
Use one container per horizontal band (header, main, footer) so a full-width background can sit behind centered content. The Sass 22,539 media-breakpoint-down(md) mixin emits max-width: 767.98px; the .02px avoids a gap when a high-DPI screen reports a fractional viewport width.