Container

A container in a structural element that wraps and contains other elements, providing layout and alignment control. It helps maintain consistency and responsiveness in design across various devices and screen sizes.

BreakpointMax WidthPadding
default100%padding: 0 1rem;
sm576px*
md768px*
lg992px*
xl1200px*
xxl1500px*

Learn how to add and customize container breakpoints in config's breakpoints page.

Container Usage


  1. Container

The .container class adjusts responsively, maintaining a fixed width that changes at different breakpoints.



<div class="container">
  <!-- ... -->
</div>
  1. Container Fluid

The .container-fluid class is always at maximum width (100%) regardless of the screen size making it suitbale for fluid layouts.



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