Height and Width
Use height and width utilities to define or constrain the dimensions of an item.
Note: Height and width utility classes are to be used to fine tune the appearance of individual elements on a page, not for page layout.
Height
Because constraining height relative to the height of the viewport is important, we have alternate height utility classs that use the vh (viewport height) units.
| Class name | Properties |
|---|---|
.h-25
|
height: 25% |
.h-50
|
height: 50% |
.h-75
|
height: 75% |
.h-100
|
height: 100% |
.h-25vh
|
height: 25vh |
.h-50vh
|
height: 50vh |
.h-75vh
|
height: 75vh |
.h-100vh
|
height: 100vh |
.h-auto
|
height: auto |
Min-height
| Class name | Properties |
|---|---|
.h-min-0
|
min-height: 0 |
.h-min-25
|
min-height: 25% |
.h-min-50
|
min-height: 50% |
.h-min-75
|
min-height: 75% |
.h-min-100
|
min-height: 100% |
.h-min-25vh
|
min-height: 25vh |
.h-min-50vh
|
min-height: 50vh |
.h-min-75vh
|
min-height: 75vh |
.h-min-100vh
|
min-height: 100vh |
Max-height
| Class name | Properties |
|---|---|
.h-max-0
|
max-height: 0 |
.h-max-25
|
max-height: 25% |
.h-max-50
|
max-height: 50% |
.h-max-75
|
max-height: 75% |
.h-max-100
|
max-height: 100% |
.h-max-25vh
|
max-height: 25vh |
.h-max-50vh
|
max-height: 50vh |
.h-max-75vh
|
max-height: 75vh |
.h-max-100vh
|
max-height: 100vh |
Width
| Class name | Properties |
|---|---|
.w-33
|
width: 33% |
.w-66
|
width: 66% |
.w-25
|
width: 25% |
.w-50
|
width: 50% |
.w-75
|
width: 75% |
.w-20
|
width: 20% |
.w-40
|
width: 40% |
.w-60
|
width: 60% |
.w-80
|
width: 80% |
.w-100
|
width: 100% |
.w-auto
|
width: auto |
Min-width
Use min-width utility classes to set minimum widths on elements.
.w-min-0
|
min-width:0 |
|---|---|
.w-min-33
|
min-width: 33% |
.w-min-66
|
min-width: 66% |
.w-min-25
|
min-width: 25% |
.w-min-50
|
min-width: 50% |
.w-min-75
|
min-width: 75% |
.w-min-20
|
min-width: 20% |
.w-min-40
|
min-width: 40% |
.w-min-60
|
min-width: 60% |
.w-min-80
|
min-width: 80% |
.w-min-100
|
min-width: 100% |
Max-width
Use max-width utility classes to set minimum widths on elements.
.w-max-0
|
max-width:0 |
|---|---|
.w-max-33
|
max-width: 33% |
.w-max-66
|
max-width: 66% |
.w-max-25
|
max-width: 25% |
.w-max-50
|
max-width: 50% |
.w-max-75
|
max-width: 75% |
.w-max-20
|
max-width: 20% |
.w-max-40
|
max-width: 40% |
.w-max-60
|
max-width: 60% |
.w-max-80
|
max-width: 80% |
.w-max-100
|
max-width: 100% |
Responsive
Width utilities apply to all screen sizes, from xs to xl, unless they have a specified breakpoint assigned within them. Breakpoint utilities apply to the specified screensize and up.
The class is constructed from the combination of the type, breakpoint, min/max(optional), and size. Example: w-sm-25 is a width of 25% at the small breakpoint. w-md-max-60 is a maximum width of 60% at and above the medium breakpoint.
Resize the window to see changes to element size at various breakpoints.