⌘ K
esc

    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">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="border-round bg-blue-100 w-12rem h-6rem p-3 m-3">
                <div class="h-full border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">h-full</div>
            </div>
            <div class="border-round bg-blue-100 w-12rem h-6rem p-3 m-3">
                <div class="h-auto border-round bg-blue-500 text-white font-bold p-3 flex align-items-center justify-content-center">h-auto</div>
            </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">
        <div class="flex flex-row flex-wrap align-items-center justify-content-center card-container yellow-container">
            <div class="h-6rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">h-6rem</div>
            <div class="h-11rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">h-11rem</div>
            <div class="h-20rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">h-20rem</div>
            <div class="h-24rem border-round bg-yellow-500 text-gray-900 font-bold p-3 m-3 flex align-items-center justify-content-center">h-24rem</div>
        </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">
        <div class="flex flex-wrap align-items-center justify-content-center card-container green-container">
            <div class="border-round bg-green-100 w-16rem h-8rem p-3 m-3">
                <div class="h-full md:h-auto border-round bg-green-500 text-white font-bold p-3 flex align-items-center justify-content-center" >h-full on small screen</div>
            </div>
        </div>
    </div>