Container

Basic usage

The container class sets the maximum width of an element based on the current responsive breakpoint. Each breakpoint defines a maximum width that scales with the viewport.

This approach allows layouts to adapt to predefined screen sizes rather than relying on a fully fluid viewport. It uses media queries with width >= … to set the container’s maximum width.

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

To add horizontal padding, use the px-* utilities:

<div class="container px-4">
  <!-- content -->
</div>

Responsive variants

The container class supports responsive variants out of the box. These variants make it possible to apply container behavior only at specific breakpoints and above.

For example:

<div class="md:container">
  <!-- Content -->
</div>