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.

Sizing Class
Value
-w--autowidth: auto;
-w--25width: 25%;
-w--50width: 50%;
-w--75width: 75%;
-w--100width: 100%;

Target specific breakpoints

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

Sizing Class
Value
-w-sm--autoVisible only from sm
-w-sm--25Visible only from sm
-w-sm--50Visible only from sm
-w-sm--75Visible only from sm
-w-sm--100Visible only from sm
-w-md--autoVisible only from md
-w-md--25Visible only from md
-w-md--50Visible only from md
-w-md--75Visible only from md
-w-md--100Visible only from md
-w-lg--autoVisible only from lg
-w-lg--25Visible only from lg
-w-lg--50Visible only from lg
-w-lg--75Visible only from lg
-w-lg--100Visible only from lg
-w-xl--autoVisible only from xl
-w-xl--25Visible only from xl
-w-xl--50Visible only from xl
-w-xl--75Visible only from xl
-w-xl--100Visible only from xl

Examples

-w--auto
-w--25
-w--50
-w-md--75
-w-xl--50
<!-- 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.

Sizing Class
Value
-h--autoheight: auto;
-h--25height: 25%;
-h--50height: 50%;
-h--75height: 75%;
-h--100height: 100%;

Target specific breakpoints

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

Sizing Class
Value
-h-sm--autoVisible only from sm
-h-sm--25Visible only from sm
-h-sm--50Visible only from sm
-h-sm--75Visible only from sm
-h-sm--100Visible only from sm
-h-md--autoVisible only from md
-h-md--25Visible only from md
-h-md--50Visible only from md
-h-md--75Visible only from md
-h-md--100Visible only from md
-h-lg--autoVisible only from lg
-h-lg--25Visible only from lg
-h-lg--50Visible only from lg
-h-lg--75Visible only from lg
-h-lg--100Visible only from lg
-h-xl--autoVisible only from xl
-h-xl--25Visible only from xl
-h-xl--50Visible only from xl
-h-xl--75Visible only from xl
-h-xl--100Visible only from xl

Examples

-h--25
-h--50
-h-md--75
-h-xl--50
-h-lg--25
<!-- 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

Sizing Class
Value
-mw--100max-width: 100%;
-mw--480max-width: 480px;
-mw--640max-width: 640px;
-mw--960max-width: 960px;
-mw--980max-width: 980px;
-mh--100max-height: 100%;
-mh--400max-height: 400px;
-mh--480max-height: 480px;