Containers

Responsive max-width containers limit content width while staying full width below each breakpoint.

Default .container matches .container-xl (1200px).

When to use containers

Most Certara products use an application shell (sidebar, header, or footer) that already provides page-level spacing. Containers are intentionally unopinionated about padding—they only set width: 100% and horizontal margin: auto. Add spacing on a case-by-case basis, for example p-6 on body or on the .container itself.

Container classes

Class nameMax widthCopy code

.container
1200px (same as .container-xl)
.container-xs
420px
.container-sm
580px
.container-md
720px
.container-lg
960px
.container-xl
1200px
.container-xxl
1440px
.container-xxxl
1600px

Example

Resize the preview to see how each container class constrains width on wider viewports.

Page content in a wide container.

Half-width column inside the same container.

Pair with .row and .col-* for layout.

<main class="p-6">
<div class="container-xxl">
  <p class="mb-6">Page content in a wide container.</p>
  <div class="row">
    <div class="col-md-6">
      <p>Half-width column inside the same container.</p>
    </div>
    <div class="col-md-6">
      <p>Pair with <code>.row</code> and <code>.col-*</code> for layout.</p>
    </div>
  </div>
</div>
</main>

DS Developers
Customization

Containers defined in globalStyles/base/_containers.scss and generated from an $container-max-widths array in globalStyles/sass-utils/_variables-base.scss.

$container-max-widths: (
  xs: 420px,
  sm: 580px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px,
);

Each key generates a .container-{breakpoint} class with the matching max-width.