container

Container

The .container class, when included, will constrain the width of its children and collapse based on defined media breakpoints.

Container extensions

The .container class does two things: - gives a little bit of padding so that content never sits flush against the viewport - resizes itself at breakpoints so that site design is consistent and easier to design for at each breakpoint

Basic Container:

Some content goes here

<div class="container">
  <div class="bg-gray-lightest">
    <p>Some content goes here</p>
  </div>
</div>
Flex Container (always fits container, but leaves the padding):

Some content goes here

<div class="container flex">
  <div class="bg-gray-lightest">
    <p>Some content goes here</p>
  </div>
</div>

Use .contain-to-N to along with .container to set a max width for a container. By default, the .container class contains to XL, but this can be set to xs, sm, md, lg, xl.

Contain-to-N example:
Contain content to XS breakpoint:

Some content goes here

<div class="container contain-to-xs">
  <div class="bg-gray-lightest">
    <h5>Contain content to XS breakpoint:</h5>
    <p>Some content goes here</p>
  </div>
</div>
With floats example:
Contain content to XS breakpoint:

Some content goes here

Contain content to SM breakpoint:

Some content goes here

<div class="container contain-to-xs left">
  <div class="bg-gray-lightest">
    <h5>Contain content to XS breakpoint:</h5>
    <p>Some content goes here</p>
  </div>
</div>
<div class="container contain-to-sm right">
  <div class="bg-gray-lightest">
    <h5>Contain content to SM breakpoint:</h5>
    <p>Some content goes here</p>
  </div>
</div>