⌘ K
esc

    Top / Right / Bottom / Left

    Controls the vertical and horizontal position of a positioned element.

    Classes
    Class Properties
    top-auto top: auto;
    top-0 top: 0;
    top-50 top: 50%;
    top-100 top: 100%;
    right-auto right: auto;
    right-0 right: 0;
    right-50 right: 50%;
    right-100 right: 100%;
    bottom-auto bottom: auto;
    bottom-0 bottom: 0;
    bottom-50 bottom: 50%;
    bottom-100 bottom: 100%;
    left-auto left: auto;
    left-0 left: 0;
    left-50 left: 50%;
    left-100 left: 100%;
    Examples
    1
    2
    3
    4
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container blue-container">
            <div class="relative bg-blue-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
                <div class="absolute top-0 left-0 bg-blue-500 text-white font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
            </div>
            <div class="relative bg-blue-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
                <div class="absolute top-0 right-0 bg-blue-500 text-white font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
            </div>
            <div class="relative bg-blue-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
                <div class="absolute bottom-0 right-0 bg-blue-500 text-white font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">3</div>
            </div>
            <div class="relative bg-blue-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
                <div class="absolute bottom-0 left-0 bg-blue-500 text-white font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">4</div>
            </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:top-0 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
    1
    2
    
    <div class="card">
        <div class="flex flex-wrap align-items-center justify-content-center card-container yellow-container">
            <div class="relative bg-yellow-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
                <div class="absolute md:top-0 md:left-0 top-50 left-50 bg-yellow-500 text-white font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
            </div>
            <div class="relative bg-yellow-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
                <div class="absolute md:bottom-0 md:right-0 bottom-50 right-50 bg-yellow-500 text-white font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
            </div>
        </div>
    </div>