1. Design System
  2. Layout
  3. Container

Container

A simple container to centre your content horizontally.

<div class="container">
    <div class="notification">
        This container is <strong>centred</strong> on desktop.
    </div>
</div>

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

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

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:

<div class="container is-fluid">
    <div class="notification">
        This container is <strong>fluid</strong>: it will have a 32px gap on either side, on any viewport size.
    </div>
</div>

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

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

Accessibility

N/A