Sizing
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
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
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; |