Containers

How they work

Containers are the most basic layout element in OUDS Web and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

OUDS Web provides a single responsive container, .container-fluid, which ensures a width: 100% at all breakpoints. To optimize its use, pair it with the .container-max-width class. For further details, refer to the Fluid containers section.

The table below compares .container-fluid max-width with and without .container-max-width across each breakpoint.

See them in action and compare them in our Grid example and Grid system example.

Please note that we apply an extra-padding on our containers (see our mixin).

<div class="container-fluid">
  <!-- Content here -->
</div>

<div class="container-xs">100% wide until x-small breakpoint</div>
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until x-large breakpoint</div>
<div class="container-2xl">100% wide until 2x-large breakpoint</div>
<div class="container-xxl">100% wide until 2x-large breakpoint</div>
<div class="container-3xl">100% wide until 3x-large breakpoint</div>

Fluid containers

Use .container-fluid for a full width container with minimum margins, spanning almost the entire width of the viewport.

<div class="container-fluid">
  ...
</div>

Default max width

This container should be associated by default with the class .container-max-width. After breakpoint 2xl, this class:

• limits the container width to 1680px (including margins),
• limits container margin to 80px each side,
• limits gutters width to 32px.

It is defined as follows:

.container-max-width {
  @include media-breakpoint-up(get-breakpoint-from-width()) {
    --#{$prefix}container-margin-x: #{map-get($container-fluid-margin, get-breakpoint-from-width())};
    max-width: $ouds-grid-2xl-max-width-alt;

    .row {
      --#{$prefix}gutter-x: #{map-get($grid-gutter-widths, get-breakpoint-from-width())};
    }
  }
}

Comparison between .container-fluid with .container-max-width and .container-fluid alone can be seen in the following table: