Sizing Easily make an element as wide or as tall with our width and height utilities.
You are able to reset the height and width of an object by adding class
.height-mobile-auto
and .width-mobile-auto
. Expand full height and width of your mobile device by adding .expand-full-height-on-mobile
and .expand-full-width-on-mobile
. Reset max and minium width/height by using the following modifier: .h-auto
, .w-auto
, .max-width-reset
, .max-height-reset
, and .min-width-0
Width presets
helpers.scss
file for more details. You can also set .width-0
to remove any given width, or you can use .w-auto
to undo explicitly specified widths
.width-1
change width to 1.5rem
Example
.width-2
change width to 2rem
Example
.width-3
change width to 2.5rem
Example
.width-4
change width to 2.75rem
Example
.width-5
change width to 3rem
Example
.width-6
change width to 3.25rem
Example
.width-7
change width to 3.5rem
Example
.width-8
change width to 3.75rem
Example
.width-9
change width to 4rem
Example
.width-10
change width to 4.25rem
Example
.width-xs
change min-width to 5rem
Example
.width-sm
change min-width to 10rem
Example
.width-lg
change min-width to 15rem
Example
.width-xl
change min-width to 20rem
Example
.w-25
change width to 25%
Example
.w-50
change width to 50%
Example
.w-75
change width to 75%
Example
.w-100
change width to 100%
ExampleHeight presets
variables.scss
file for more details on $p-*
values.
.height-1
change width to 1.5rem
Example
.height-2
change width to 2rem
Example
.height-3
change width to 2.5rem
Example
.height-4
change width to 2.75rem
Example
.height-5
change width to 3rem
Example
.height-6
change width to 3.25rem
Example
.height-7
change width to 3.5rem
Example
.height-8
change width to 3.75rem
Example
.height-9
change width to 4rem
Example
.height-10
change width to 4.25rem
Example
.height-xs
change min-width to 5rem
Example
.height-sm
change min-width to 10rem
Example
.height-lg
change min-width to 15rem
Example
.height-xl
change min-width to 20rem
Example
.h-25
change width to 25%
Example
.h-50
change width to 50%
Example
.h-75
change width to 75%
Example
.h-100
change width to 100%
Example