Manage the padding and widths of the containing elements that make up your layouts.
The Container Utility
The container utility (
.container) applies consistent padding on the left and right sides of its selector. A container without a width variation utility span the full width of its parent.
Width variation utilities come in three sizes: narrow, medium, and wide (Figure 2). Apply them to containers or use them independently.
When present on
.container selectors, width variation utilities (e.g.
narrow) center horizontally within their parent.
Width variation utilities accept breakpoint modifiers.
Consider the HTML in Figure 3. The container starts at the narrow width. It then changes to the medium width at the large breakpoint. Finally, the container changes to the wide width at the extra-large breakpoint.