Sizing

Use responsive sizing utility classes to quickly apply widths and heights on elements.

Notation

Sizing utility classes can be defined using the format -w-{breakpoint}--{value} for widths and -h-{breakpoint}--{value} for heights. Breakpoints supported are sm, md, lg, and xl.

Width

Target all breakpoints

Sizing utility classes with no breakpoint defined apply to all screen sizes.

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Examples

<!-- width auto on all breakpoints -->
<div class="-w--auto"></div>
<!-- width 25% on all breakpoints -->
<div class="-w--25"></div>
<!-- width 50% on all breakpoints -->
<div class="-w--50"></div>
<!-- width 75% from md -->
<div class="-w-md--75"></div>
<!-- width 50% from xl -->
<div class="-w-xl--50"></div>

Height

Target all breakpoints

Sizing utility classes with no breakpoint defined apply to all screen sizes.

Target specific breakpoints

To target a specific breakpoint, add the breakpoint abbreviation to the class.

Examples

<!-- height auto on all breakpoints -->
<div class="-h--auto"></div>
<!-- height 25% on all breakpoints -->
<div class="-h--25"></div>
<!-- height 50% on all breakpoints -->
<div class="-h--50"></div>
<!-- height 75% from md -->
<div class="-h-md--75"></div>
<!-- height 50% from xl -->
<div class="-h-xl--50"></div>
<!-- height 25% from lg -->
<div class="-h-lg--25"></div>

Maximum width/height

Using the format -mw--{value} for max-width and -mh--{value} for max-height