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 height to 1.5rem
Example
.height-2
change height to 2rem
Example
.height-3
change height to 2.5rem
Example
.height-4
change height to 2.75rem
Example
.height-5
change height to 3rem
Example
.height-6
change height to 3.25rem
Example
.height-7
change height to 3.5rem
Example
.height-8
change height to 3.75rem
Example
.height-9
change height to 4rem
Example
.height-10
change height to 4.25rem
Example
.height-xs
change min-height to 5rem
Example
.height-sm
change min-height to 10rem
Example
.height-lg
change min-height to 15rem
Example
.height-xl
change min-height to 20rem
Example
.h-25
change height to 25%
Example
.h-50
change height to 50%
Example
.h-75
change height to 75%
Example
.h-100
change height to 100%
Example