Height

Defines the height of an element.

Classes#

Class	Properties
h-full	height: 100%;
h-screen	height: 100vh;
h-auto	height: auto;
h-1rem	height: 1rem;
h-2rem	height: 2rem;
h-3rem	height: 3rem;
h-4rem	height: 4rem;
h-5rem	height: 5rem;
h-6rem	height: 6rem;
h-7rem	height: 7rem;
h-8rem	height: 8rem;
h-9rem	height: 9rem;
h-10rem	height: 10rem;
h-11rem	height: 11rem;
h-12rem	height: 12rem;
h-13rem	height: 13rem;
h-14rem	height: 14rem;
h-15rem	height: 15rem;
h-16rem	height: 16rem;
h-17rem	height: 17rem;
h-18rem	height: 18rem;
h-19rem	height: 19rem;
h-20rem	height: 20rem;
h-21rem	height: 21rem;
h-22rem	height: 22rem;
h-23rem	height: 23rem;
h-24rem	height: 24rem;
h-25rem	height: 25rem;
h-26rem	height: 26rem;
h-27rem	height: 27rem;
h-28rem	height: 28rem;
h-29rem	height: 29rem;
h-30rem	height: 30rem;

Examples#

h-full

h-auto

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="border-round bg-primary-100 w-12rem h-6rem p-3 m-3">
        <div class="h-full border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">h-full</div>
    </div>
    <div class="border-round bg-primary-100 w-12rem h-6rem p-3 m-3">
        <div class="h-auto border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">h-auto</div>
    </div>
</div>

Fixed Height#

Various fixed height options are built-in based on rem units.

h-6rem

h-11rem

h-20rem

h-24rem

<div class="flex flex-row flex-wrap align-items-center justify-content-center">
    <div class="h-6rem border-round bg-primary font-bold p-3 m-3 flex align-items-center justify-content-center">h-6rem</div>
    <div class="h-11rem border-round bg-primary font-bold p-3 m-3 flex align-items-center justify-content-center">h-11rem</div>
    <div class="h-20rem border-round bg-primary font-bold p-3 m-3 flex align-items-center justify-content-center">h-20rem</div>
    <div class="h-24rem border-round bg-primary font-bold p-3 m-3 flex align-items-center justify-content-center">h-24rem</div>
</div>

Responsive#

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:h-full to use a responsive class.

Class	Description
sm:	small screens e.g. phones
md:	medium screens e.g. tablets
lg:	large screens e.g. notebooks
xl:	larger screens e.g monitors

h-full on small screen

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="border-round bg-primary-100 w-16rem h-8rem p-3 m-3">
        <div class="h-full md:h-auto border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">h-full on small screen</div>
    </div>
</div>