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:

Custom max width

If necessary, in specific cases, you can define a custom maximum width for the fluid container by overriding the $ouds-grid-2xl-max-width-alt variable before importing the OUDS Web SCSS files.

This adjustment will apply to all containers using the .container-max-widthclass, ensuring that your layout stays within the specific width. Once the layout exceeds the $ouds-grid-2xl-max-width-alt value at larger breakpoints, the container’s margins and gutter values will remain unchanged.

@import "../node_modules/@ouds/web/scss/config";
@import "../node_modules/@ouds/web/scss/functions";

$ouds-grid-2xl-max-width-alt: 3500px; // Custom container max width

@import "../node_modules/@ouds/web/scss/tokens/raw";
@import "../node_modules/@ouds/web/scss/tokens/semantic";
@import "../node_modules/@ouds/web/scss/tokens/semantic-colors-custom-props";
@import "../node_modules/@ouds/web/scss/tokens/composite";
@import "../node_modules/@ouds/web/scss/tokens/component";
@import "../node_modules/@ouds/web/scss/variables";
@import "../node_modules/@ouds/web/scss/variables-dark";
// etc

CSS

Sass variables

As shown above, OUDS Web generates a series of predefined container classes to help you build the layouts you desire. You may customize these predefined container classes by modifying the Sass map (found in _variables.scss) that powers them:

$container-max-widths: (
  xs: $ouds-grid-xs-min-width, // 390px
  sm: $ouds-grid-sm-min-width, // 480px
  md: $ouds-grid-md-min-width, // 736px
  lg: $ouds-grid-lg-min-width, // 1024px
  xl: $ouds-grid-xl-min-width, // 1320px
  2xl: $ouds-grid-2xl-min-width, // 1640px
  3xl: $ouds-grid-3xl-min-width, // 1880px
);

$container-fluid-margin: (
  2xs: $ouds-grid-2xs-margin, // 16px
  xs: $ouds-grid-xs-margin, // 24px
  sm: $ouds-grid-sm-margin, // 28px
  md: $ouds-grid-md-margin, // 32px
  lg: $ouds-grid-lg-margin, // 40px
  xl: $ouds-grid-xl-margin, // 56px
  2xl: $ouds-grid-2xl-margin, // 80px
  3xl: $ouds-grid-3xl-margin // 112px
);

For more information and examples on how to modify our Sass maps and variables, please refer to the Sass section of the Grid documentation.

Sass mixins

In addition to customizing the Sass, you can also create your own containers with our Sass mixin.

@mixin make-container($gutter: $container-padding-x) {
  // OUDS mod: no CSS variable gutter definition inside containers
  width: 100%;
  padding-right: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)`
  padding-left: var(--#{$prefix}container-margin-x); // OUDS mod: instead of `calc(var(--#{$prefix}gutter-x) * .5)`
  margin-right: auto;
  margin-left: auto;

  // OUDS mod: gutter depends on breakpoints
  @each $breakpoint, $container-fluid-marg in $container-fluid-margin {
    @include media-breakpoint-up($breakpoint) {
      --#{$prefix}container-margin-x: #{$container-fluid-marg};
    }
  }
  // End mod
}

// Usage
.custom-container {
  @include make-container();
}