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="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 100px;">
        <div class="h-full bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">h-full</div>
    </div>
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 100px;">
        <div class="h-auto bg-blue-100 text-blue-500 font-bold shadow-2 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="card flex flex-row flex-wrap align-items-center justify-content-center">
    <div class="h-6rem bg-blue-100 text-blue-500 font-bold shadow-2 p-3 m-3 flex align-items-center justify-content-center">h-6rem</div>
    <div class="h-11rem bg-blue-100 text-blue-500 font-bold shadow-2 p-3 m-3 flex align-items-center justify-content-center">h-11rem</div>
    <div class="h-20rem bg-blue-100 text-blue-500 font-bold shadow-2 p-3 m-3 flex align-items-center justify-content-center">h-20rem</div>
    <div class="h-24rem bg-blue-100 text-blue-500 font-bold shadow-2 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.

  • 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="card flex flex-wrap align-items-center justify-content-center">
    <div class="bg-blue-50 shadow-1 p-3 m-3" style="width: 220px; height: 100px;">
        <div class="h-full md:h-auto bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" >h-full on small screen</div>
    </div>
</div>