Width

Classes to add responsive widths to elements or components

Width Utilities

Width utility classes add the ability to set a max-width to a component or element. The width utility classes are based on our breakpoint sizes.

Important

The width utility classes are intended for use when fine-tuning the appearance of individual elements on a page and should not be used for high-level page layout. To lay out pages, use the flexbox or CSS grid instead.

Class Name	CSS Value
.max-width-sm	max-width: 544px;
.max-width-md	max-width: 768px;
.max-width-lg	max-width: 1012px
.max-width-xl	max-width: 1280px
.max-width-xxl	max-width: 1366px
.max-width-xxxl	max-width: 1640px

.max-width-sm

.max-width-md

.max-width-lg

.max-width-xl

.max-width-xxl

.max-width-xxxl

<div class="max-width-sm text-white background-blue padding-3 margin-bottom-2">.max-width-sm</div>
<div class="max-width-md text-white background-blue padding-3 margin-bottom-2">.max-width-md</div>
<div class="max-width-lg text-white background-blue padding-3 margin-bottom-2">.max-width-lg</div>
<div class="max-width-xl text-white background-blue padding-3 margin-bottom-2">.max-width-xl</div>
<div class="max-width-xxl text-white background-blue padding-3 margin-bottom-2">.max-width-xxl</div>
<div class="max-width-xxxl text-white background-blue padding-3 margin-bottom-2">.max-width-xxxl</div>

Responsive Widths

Each utility class can be used responsively by adding a modifier to the end of the class name. Adding the modifier will specify at what screen size the max-width will take effect.

In the example below, the div will have a max-width of 768px at viewports 1012px and up

<div class="max-width-md-lg">
    <!-- markup -->
</div>

Below is a set of modifiers that can be added to the max-width utilities

Modifier	Behavior
-sm	Viewports 544px and up
-md	Viewports 768px and up
-lg	Viewports 1012px and up
-xl	Viewports 1280px and up
-xxl	Viewports 1366px and up
-xxxl	Viewports 1640px and up