Container • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Mountain alps near river and tree

Photo by 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 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.

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

  • 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