Containers
Containers are a base layout block to provide spacing and alignment for content within a given viewport.
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 amax-width
at each responsive breakpoint.container-fluid
, which iswidth: 100%
at all breakpoints.container-{breakpoint}
, which iswidth: 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.
Extra small <576px <36em |
Small ≥576px ≥36em |
Medium ≥768px ≥48em |
Large ≥992px ≥62em |
Extra large ≥1200px ≥75em |
|
---|---|---|---|---|---|
.container |
100% | 544px (34rem) | 720px (45rem) | 960px (60rem) | 1152px (72rem) |
.container-sm |
100% | 544px (34rem) | 720px (45rem) | 960px (60rem) | 1152px (72rem) |
.container-md |
100% | 100% | 720px (45rem) | 960px (60rem) | 1152px (72rem) |
.container-lg |
100% | 100% | 100% | 960px (60rem) | 1152px (72rem) |
.container-xl |
100% | 100% | 100% | 100% | 1152px (72rem) |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
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-width
s 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.
Name | Type | Default | Description |
---|---|---|---|
$enable-container |
boolean | true |
Enable the generation of the grid layout classes.
Smaller segements of the grid layout classes can be disabled with the following $enable-* variables.
|
$enable-container-responsive |
boolean | true |
Enable the generation of the responsive container classes. |
$responsive-container-breakpoints |
list | map-keys($grid-breakpoints) |
Subset of breakpoints to generate responsive container classes for. |
$container-max-widths |
map |
|
Grid breakpoints widths. The rem() function converts a pixel value to a rem value.
|
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);
Argument | Type | Default | Description |
---|---|---|---|
$padding-x |
number | $container-padding-x |
Horizontal padding for a container. |