Container

The .container class can be used in any context, but you'll most likely want to use it as a direct child of:

  • .navbar
  • .section

The containers width for each breakpoint is the result of: $device - (2 * $container-gap). The $container-gap variable has a default value of 32px but can be modified.

This is how the container behaves:

  • On $desktop it will have a maximum width of 960px.
  • On $widescreen it will have a maximum width of 1152px.
  • On $fullhd it will have a maximum width of 1344px.

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

The container is centered on desktop
<div class="container">
    <div>The container is <b>centered</b> on desktop</div>
</div>

Fluid container

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

This is the fluid container
<div class="container is-fluid">
    <div>This is the <b>fluid</b> container</div>
</div>

Breakpoint containers

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

This container is full width until the $widescreen breakpoint. 
<div class="container is-widescreen">
    <div>This <b>container</b> is full width until the <code>$widescreen</code> breakpoint. </div>
</div>
This container is full width until the $fullhd breakpoint. 
<div class="container is-fullhd">
    <div>This <b>container</b> is full width until the <code>$fullhd</code> breakpoint. </div>
</div>
← Section →