--- layout: documentation doc-tab: layout doc-subtab: container --- {% 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:

  • .header
  • .hero
  • .section
  • .footer

On mobile and tablet, the container will have a margin of 20px on both the left and right sides.

On desktop (>= 1000px), the container will have a maximum width of 960px and will be horizontally centered.

On widescreen (>= 1192px), the container will have a maximum width of 1152px.

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

This container is centered on desktop.
{% highlight html %}
This container is centered on desktop.
{% endhighlight %}

Fluid container

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

This container is fluid: it will have a 20px gap on either side.
{% highlight html %}
This container is fluid: it will have a 20px gap on either side, on any viewport size.
{% endhighlight %}