Container

Classes for the easy centering of content

Intended for easily centering your content horizontally, container widths match the breakpoints and are available at a sm, md, lg xl and xxl size. Containers apply a max-width rather than a fixed-width for responsive layouts.

.container-sm: max-width 544px

.container-md: max-width 768px

.container-lg: max-width 1012px

.container-xl: max-width 1280px

.container-xxl: max-width 1366px

<div class="container-sm border padding-1 background-blue-light-10">
   <strong>.container-sm:</strong> max-width 544px
</div>
<div class="container-md border padding-1 margin-top background-blue-light-10">
   <strong>.container-md:</strong> max-width 768px
</div>
<div class="container-lg border padding-1 margin-top background-blue-light-10">
   <strong>.container-lg:</strong> max-width 1012px
</div>
<div class="container-xl border padding-1 margin-top background-blue-light-10">
   <strong>.container-xl:</strong> max-width 1280px
</div>
<div class="container-xxl border padding-1 margin-top background-blue-light-10">
   <strong>.container-xxl:</strong> max-width 1366px
</div>