--- title: Container layout: documentation doc-tab: layout doc-subtab: container --- {% capture container_example %}
This container is centered on desktop.
{% endcapture %} {% capture container_fluid_example %}
This container is fluid: it will have a 24px gap on either side, on any viewport size.
{% endcapture %} {% capture container_widescreen_example %}
This container is fullwidth until the $widescreen breakpoint.
{% endcapture %} {% capture container_fullhd_example %}
This container is fullwidth until the $fullhd breakpoint.
{% endcapture %} {% include subnav-layout.html %}

Container

A simple container to center your content horizontally


The .container class can be used in any context, but mostly as a direct child of either:

  • .navbar
  • .hero
  • .section
  • .footer

The container breakpoints have an offset defined by the $container-offset variable. It has a default value of 60px.

This is how the container will behave:

  • on $desktop + $container-offset = >= 1068px it will have a maximum width of 960px and will be horizontally centered.
  • on $widescreen + $container-offset = >= 1260px it will have a maximum width of 1152px.
  • on $fullhd + $container-offset = >= 1452px it will have a maximum width of 1344px.

The $gap variable has a default value of 24px but can be modified.

The values 960, 1152 and 1344 have been chosen because they are divisible by both 12 and 16.

{{container_example}}
{% highlight html %}{{container_example}}{% endhighlight %}

Fluid container

If you don't want to have a maximum width but want to keep the 24px margin on the left and right sides, add the is-fluid modifier:

{{container_fluid_example}}
{% highlight html %}{{container_fluid_example}}{% endhighlight %}

Breakpoint containers

With the two modifiers .is-widescreen and .is-fullhd, you can have a fullwidth container until those specific breakpoints.

{{container_widescreen_example}}
{% highlight html %}{{container_widescreen_example}}{% endhighlight %}
{{container_fullhd_example}}
{% highlight html %}{{container_fullhd_example}}{% endhighlight %}