Container

A simple container for padding your content

The container class can be used to provide padding for your page content on larger viewports by constraining the content to a maximum width of 1200px and positioning it within the center of the page.

<div class="container">
  <h1>I'm a container!</h1>
</div>
Copy

The .is-full modifier will remove the maximum width and add padding of 20px to the left and right of the container. This makes for a neat and simple full-width container.


Variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.

Variable Type Default Value
$container-padding padding 20px
$container-max-width units 1200px