Containers

How They Work

Containers are the most basic layout element in Figuration and are required when using the grid system. Containers are used to contain, pad, and (sometimes) center the content within them.

While containers can be nested, most layouts do not require a nested container.

There are three different container types available:

• .container, which sets a max-width at each responsive breakpoint
• .container-fluid, which is width: 100% at all breakpoints
• .container-{breakpoint}, which is width: 100% until the specified breakpoint

See them in action and compare them in our Grid example.

The table below illustrates how each container's max-width compares to the original .container and .container-fluid across each breakpoint.

Base Container

Use .container for a fixed-width container with a defined max-width per breakpoint.

<div class="container">
  <!-- Content here -->
</div>

Fluid Container

Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">
  ...
</div>

Responsive Containers

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, and xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Sass Reference

Variables

The available Customization options, or Sass variables, that can be customized for containers.

(
    sm: rem(544px),
    md: rem(720px),
    lg: rem(960px),
    xl: rem(1152px)
)

Mixins

Here are the mixins related to containers that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

make-container

Create a container element.

@include make-container($padding-x: $container-padding-x);