Sizing
Adjust the width or height of an element with sizing utilities.
Contents
Relative to the Parent
Width and height utilities are generated from the $sizes
Sass map in _settings.scss
. Available values are 25%
, 50%
, 75%
, 100%
, and auto
by default. You can modify the map values if other values are needed.
Width
Width utilities use the format .w-{width}
, for example .w-25
sets an element to 25%
width.
Height
Height utilities use the format .h-{height}
, for example .h-25
sets an element to 25%
height.
Max Width/Height
You can also use the .mw-100
and .mh-100
, to set max-width: 100%;
or max-height: 100%;
, utilities as needed.
Relative to the Viewport
You can also use utilities to set the width and height relative to the viewport.
SASS Reference
Variables
The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.
Name | Type | Default | Description |
---|---|---|---|
$enable-utility-sizing |
boolean | true |
Enable the generation of the sizing utility classes. |
$enable-utility-sizing-width |
boolean | true |
Enable the generation of the width sizing utility classes. |
$enable-utility-sizing-height |
boolean | true |
Enable the generation of the height sizing utility classes. |
$enable-utility-sizing-viewport |
boolean | true |
Enable the generation of the viewport sizing utility classes. |
Mixins
No mixins available.