Container

Use .container to center page content, keep sections readable, and create a consistent horizontal rhythm across screen sizes. It is a pure CSS layout wrapper and does not require JavaScript.

Quick reference

Class	Styles
`container`	`width: 100%;` `margin-inline: auto;` `padding-inline: clamp(16px, 4vw, 48px);`

Usage

<div class="container">
  <!-- Page content here -->
</div>

default

100% fluid

< 640px

640px

≥ 640px

864px

≥ 864px

1120px

≥ 1120px

1408px

≥ 1408px

2xl

1792px

≥ 1792px

Basic section

Place .container inside a semantic section. The section controls background and vertical spacing; the container controls width and alignment.

<section class="py-5">
  <div class="container">
    <h1 class="text-4xlarge mb-3">Build modern interfaces faster.</h1>
    <p class="text-large text-muted mb-0">
      FrontAlign gives your page a clean layout foundation without custom CSS.
    </p>
  </div>
</section>

Hero layout

<section class="py-6">
  <div class="container">
    <div class="is-grid grid-cols-1 lg:grid-cols-2 gap-5 align-items-center">
      <div>
        <span class="badge is-primary mb-3">New release</span>
        <h1 class="text-5xlarge mb-3">One layout system for every stack.</h1>
        <p class="text-large text-muted mb-4">
          Utilities, components and runtime behavior in one lightweight UI engine.
        </p>

        <div class="is-flex gap-3 flex-wrap">
          <a class="button is-primary" href="#">Get Started</a>
          <a class="button is-outline" href="#">View Docs</a>
        </div>
      </div>

      <div class="bg-surface rounded-4 p-4 shadow-medium">
        <!-- Preview, image or code block -->
      </div>
    </div>
  </div>
</section>

Blog content

Use .container for the page width, then use a narrower content utility inside it for long-form reading.

<main class="container py-5">
  <article class="mx-auto">
    <h1 class="text-4xlarge mb-3">Designing Better Layouts</h1>
    <p class="text-muted mb-4">
      A practical guide to spacing, rhythm and readable content.
    </p>

    <p>
      Containers help keep long-form content comfortable to read across mobile,
      tablet and desktop screens.
    </p>
  </article>
</main>

Full-bleed section with aligned content

For edge-to-edge layouts, keep the background or carousel full width and only wrap the aligned content in .container.

<section class="bg-surface py-5">
  <div class="container mb-4">
    <h2 class="text-3xlarge mb-2">Featured Products</h2>
    <p class="text-muted mb-0">A full-width carousel with aligned heading content.</p>
  </div>

  <div class="overflow-x-auto">
    <!-- Full-bleed carousel -->
  </div>
</section>

Usage notes

Use one .container per major page section.
Place background colors on the outer section, not on .container, unless the container itself is the visual card.
Avoid nesting .container inside another .container.
Combine .container with Grid, Flexbox and spacing utilities for complete layouts.
Use narrower content utilities such as max-w-prose for articles, documentation and long-form text.
Do not use .container for maps, large media banners, full-width carousels or edge-to-edge dashboards.