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--auto`	`width: auto;`
`-w--*`	can be incremented by 5%

Target specific breakpoints#

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

Sizing Class	Value
`-w-sm--auto`	Visible only from `sm`
`-w-sm--*`	Visible only from `sm`, can be incremented by 5%
`-w-md--auto`	Visible only from `md`
`-w-md--*`	Visible only from `md`, can be incremented by 5%
`-w-lg--auto`	Visible only from `lg`
`-w-lg--*`	Visible only from `lg`, can be incremented by 5%
`-w-xl--auto`	Visible only from `xl`
`-w-xl--*`	Visible only from `xl`, can be incremented by 5%

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--auto`	`height: auto;`
`-h--25`	`height: 25%;`
`-h--50`	`height: 50%;`
`-h--75`	`height: 75%;`
`-h--100`	`height: 100%;`

Target specific breakpoints#

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

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

Examples#

-h--auto

-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--100`	`max-width: 100%;`
`-mw--480`	`max-width: 480px;`
`-mw--640`	`max-width: 640px;`
`-mw--720`	`max-width: 720px;`
`-mw--960`	`max-width: 960px;`
`-mw--980`	`max-width: 980px;`
`-mw--1200`	`max-width: 1200px;`
`-mh--100`	`max-height: 100%;`
`-mh--400`	`max-height: 400px;`
`-mh--480`	`max-height: 480px;`