Skip to contentSkip to footer
Mountain alps near river and tree

Photo: Mark Basarab

Container

Introduction

Manage the padding and widths of the containing elements that make up your layouts.

The Container Utility

The container utility (.container) applies consistent left and right padding. A container without a width variation utility spans the full width of its parent.

Container (full width)

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

Breakpoint Modifiers

The container utility accepts breakpoint modifiers. Use them to defer the container padding until a specific breakpoint.

Consider the HTML in Figure 2. The element has no padding below the large breakpoint. At the large breakpoint and above, it gains the standard container padding.

Container (large breakpoint)

HTML
      <div class="container--lg">...</div>
Figure 2

Width Variations

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

When present on .container elements, width variation utilities (e.g. narrow) center horizontally within their parent.

Container (narrow width)

Container (medium width)

Container (wide width)

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

Breakpoint Modifiers

Width variation utilities accept breakpoint modifiers.

Consider the HTML in Figure 4. 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 (responsive width)

HTML
      <!-- With breakpoint modifiers -->


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

Customization