Utilities for setting the height of an element.

Class Properties
.h0 height: 0;
.h1 height: 0.25rem;
.h2 height: 0.5rem;
.h3 height: 0.75rem;
.h4 height: 1rem;
.h5 height: 1.25rem;
.h6 height: 1.5rem;
.h8 height: 2rem;
.h10 height: 2.5rem;
.h12 height: 3rem;
.h16 height: 4rem;
.h20 height: 5rem;
.h24 height: 6rem;
.h32 height: 8rem;
.h40 height: 10rem;
.h48 height: 12rem;
.h64 height: 16rem;
.h80 height: 20rem;
.h96 height: 24rem;
.h128 height: 32rem;
.h160 height: 40rem;
.h192 height: 48rem;
.h256 height: 64rem;
.h320 height: 80rem;
.h384 height: 96rem;
.h512 height: 128rem;
.h640 height: 160rem;
.h768 height: 192rem;
.h-50 height: 50%;
.h-100 height: 100%;
.h-10vh height: 10vh;
.h-20vh height: 20vh;
.h-30vh height: 30vh;
.h-40vh height: 40vh;
.h-50vh height: 50vh;
.h-60vh height: 60vh;
.h-70vh height: 70vh;
.h-80vh height: 80vh;
.h-90vh height: 90vh;
.h-100vh height: 100vh;
.h-100vw height: 100vw;
.h-90vw height: 90vw;
.h-80vw height: 80vw;
.h-70vw height: 70vw;
.h-60vw height: 60vw;
.h-50vw height: 50vw;
.h-45vw height: 45vw;
.h-42.6vw height: 42.6vw;
.h-40vw height: 40vw;
.h-33vw height: 33vw;
.h-30vw height: 30vw;
.h-25vw height: 25vw;
.h-20vw height: 20vw;
.h-15vw height: 15vw;
.h-auto height: auto;
.h-fit-content height: fit-content;
.h-inherit height: inherit;
.h-initial height: initial;
.h-max-content height: max-content;
.h-min-content height: min-content;
.h-unset height: unset;

Fixed height

Use .h{step} to set an element to a fixed height.


Dynamic height

Use .h-{percentage}, .h-{viewport-height} or .h-{viewport-width} to set an element to a dynamic height.



To change the height at a specific breakpoint, add @{breakpoint} add the end of the utility.

Resize your browser window to see the changes


All height values can be adjusted in _settings.scss.


By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.