Controls the vertical and horizontal position of a positioned element.
| 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%; |
<div class="flex flex-wrap gap-3 align-items-center justify-content-center">
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
<div class="absolute top-0 left-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
</div>
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
<div class="absolute top-0 right-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
</div>
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
<div class="absolute bottom-0 right-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">3</div>
</div>
<div class="relative bg-primary-200 w-9rem h-9rem mx-3 my-3 md:my-0 border-round">
<div class="absolute bottom-0 left-0 bg-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">4</div>
</div>
</div>
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.
| 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 |
<div class="flex flex-wrap align-items-center justify-content-center">
<div class="relative bg-primary-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-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">1</div>
</div>
<div class="relative bg-primary-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-primary font-bold flex align-items-center justify-content-center w-4rem h-4rem border-round">2</div>
</div>
</div>