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