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>
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.
CSS variables
Use CSS variables to override default styling for the container element.
.container { --padding: 20px; --max-width: 1200px; }
Sass 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 |