Container

Container is an element designed to contain page elements to a reasonable maximum width based on the size of a user's screen. This is useful to couple with other UI elements like grid or menu to restrict their width to a reasonable size for display
default container

If you do not want a maximum width but keep the 32px margin on both sides, add is-fluid.

fluid container

Usage

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

  • .navbar
  • .sgds-hero
  • .sgds-section
  • .sgds-footer
<section class="sgds-section">
    <div class="sgds-container">
        default container
    </div>
</section>

Style

Modifier Description
is-fluid Add when you don't want to have a max width but want to keep the 32px margin on both sides
is-widescreen Add when you want to have the container fullwidth until widescreen breakpoint at 1152px
is-fullhd Add when you want to have the container fullwidth until fullhd breakpoint at 1344px

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Tell us more