Container

Set the main container of the page with proper spacing on the sides.
.container .container-fluid

Loop config includes container by default. In manual mode use the mixin Container()

// default config
container: (
  gutter: (
    rt: 1rem,
    sm: 1.5rem,
  ),
  maxWidth: 1280px,
),

.container

The class .container helps you center the content horizontally while reaching the maxWidth threshold. The side gutters are also applied.

<div class="container">
<!-- your content here -->
</div>

.container-fluid

The class .container-fluid has no width limit. Its purpose is to only give you the sides gutter.

<div class="container-fluid">
<!-- your content here -->
</div>

Use Helper classes << >> Use Visibility classes