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-autoand .width-mobile-auto. Expand full height and width of your mobile device by adding .expand-full-height-on-mobileand .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.scssfile for more details. You can also set .width-0to remove any given width, or you can use .w-autoto 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-widthto 5rem
Example
.width-sm
change min-widthto 10rem
Example
.width-lg
change min-widthto 15rem
Example
.width-xl
change min-widthto 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.scssfile 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-widthto 5rem
Example
.height-sm
change min-widthto 10rem
Example
.height-lg
change min-widthto 15rem
Example
.height-xl
change min-widthto 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