Skip Navigation

Photo by Mark Basarab  on Unsplash

Containers

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.

Container (full width)

<div class="container">...</div>
Figure 1

Width Variations

Width variation utilities come in three sizes: narrow, medium, and wide (Figure 2). Apply them to containers or use them independently. Width variation utilities horizontally center their selectors.

Container (full width)

Container (medium width)

Container (wide width)

<div class="container narrow">...</div>
<div class="container medium">...</div>
<div class="container wide">...</div>
Figure 2

Breakpoint Modifiers

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.

Container (full width)

<!-- With breakpoint modifiers -->

<div class="container narrow medium--lg wide--xl">...</div>
Figure 3

Related CSS Variables

Further customize Containers by redefining any of their related CSS variables as shown below.

:root {
    --container-padding-x-sm: var(--spacer-2);
    --container-padding-x-lg: var(--spacer-3);
    --narrow-width: 40rem;
    --medium-width: calc( var(--narrow-width) * 1.75);
    --wide-width: calc( var(--narrow-width) * 2.5);
}