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
5
6

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute top-0 left-0 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">1</div>
    </div>
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute top-50 left-50 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">2</div>
    </div>
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute top-0 right-0 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">3</div>
    </div>
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute bottom-0 left-0 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">4</div>
    </div>
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute bottom-50 right-50 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">5</div>
    </div>
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute bottom-0 right-0 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">6</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 flex flex-wrap align-items-center justify-content-center">
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute md:top-0 md:left-0 top-50 left-50 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">1</div>
    </div>
    <div class="relative bg-blue-50 shadow-1 p-3 m-3" style="width: 200px; height: 200px;">
        <div class="absolute md:bottom-0 md:right-0 bottom-50 right-50 bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center" style="width: 50px; height: 50px">2</div>
    </div>
</div>