The container mixin and class limit content to the max width configured by the $container variable, using the $gutter variable by default for left and right padding.

<div class="container">
    <p>Lorem consectetur porro saepe alias quo. Iure fugiat illo magnam velit sapiente esse? Dicta adipisci illum nisi perspiciatis eligendi! Assumenda sequi aliquam dignissimos dolore nesciunt animi. Laboriosam ad ad nam.</p>
    <p>Amet aliquam elit saepe magnam reiciendis Incidunt possimus distinctio mollitia ea iure earum. Earum beatae provident ipsa necessitatibus distinctio Rerum unde obcaecati animi consequuntur molestias. Error corrupti placeat perferendis iusto</p>
    <p>Dolor quidem eius cupiditate ipsum rem accusantium. Laborum temporibus sit a rem a Itaque harum officiis deleniti dolores magnam sapiente? Provident tempore quidem consectetur fugiat assumenda. Libero unde dolor nulla.</p>
</div>
  • Content:
    ///
    /// container mixin
    ///
    @mixin container($max-width: $container, $h-padding: $gutter) {
        margin-left: auto;
        margin-right: auto;
        max-width: $max-width;
        padding-left: $h-padding;
        padding-right: $h-padding;
        position: relative;
    }
    
    .container {
        @include container;
    }
    
  • URL: /components/raw/container/container.scss
  • Filesystem Path: resources/styles/utilities/container/container.scss
  • Size: 293 Bytes