Bottom / Left / Right / Top

Bottom

Controls the bottom placement of positioned elements.

Utility	Properties
Error: 429

A

<div class="p-r d-18 rad-2 sm:d-32 tc-white">
  <div class="p-a i-0 rad-2 bo-1" id="area"></div>
  <div class="p-a bo-0 l-0 d-f d-12 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Inset

Controls the placement of positioned elements in all directions.

Utility	Properties
Error: 429

A

<div class="p-r d-18 rad-2 sm:d-32 tc-white">
  <div class="p-a i-0 rad-2 bo-1" id="area"></div>
  <div class="p-a i-0 d-f ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Inset X

Controls the placement of positioned elements in the horizontal direction.

Utility	Properties
Error: 429

A

<div class="p-r d-18 rad-2 sm:d-32 tc-white">
  <div class="p-a i-0 rad-2 bo-1" id="area"></div>
  <div class="p-a t-0 ix-0 d-f h-12 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Inset Y

Controls the placement of positioned elements in the vertical direction.

Utility	Properties
Error: 429

A

<div class="p-r d-18 rad-2 sm:d-32 tc-white">
  <div class="p-a i-0 rad-2 bo-1" id="area"></div>
  <div class="p-a iy-0 l-0 d-f w-12 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Left

Controls the left placement of positioned elements.

Utility	Properties
Error: 429

A

<div class="p-r d-18 rad-2 sm:d-32 tc-white">
  <div class="p-a i-0 rad-2 bo-1" id="area"></div>
  <div class="p-a t-0 l-0 d-f d-12 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Right

Controls the right placement of positioned elements.

Utility	Properties
r-0	right: 0rem;
r-1	right: 0.25rem;
r-2	right: 0.5rem;
r-3	right: 0.75rem;
r-4	right: 1rem;
r-5	right: 1.25rem;
r-6	right: 1.5rem;
r-7	right: 1.75rem;
r-8	right: 2rem;
r-9	right: 2.25rem;
r-10	right: 2.5rem;
r-11	right: 2.75rem;
r-12	right: 3rem;
r-13	right: 3.25rem;
r-14	right: 3.5rem;
r-15	right: 3.75rem;
r-16	right: 4rem;
r-full	right: 100%;
r-half	right: 50%;

A

<div class="p-r d-18 rad-2 sm:d-32 tc-white">
  <div class="p-a i-0 rad-2 bo-1" id="area"></div>
  <div class="p-a bo-0 r-0 d-f d-12 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Top

Controls the top placement of positioned elements.

Utility	Properties
Error: 429

A

<div class="p-r d-18 rad-2 sm:d-32 tc-white">
  <div class="p-a i-0 rad-2 bo-1" id="area"></div>
  <div class="p-a t-0 r-0 d-f d-12 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:-*,md:-*, lg:-*, and xxl:-* allows targeting specific utilities in different viewports.

<div class="l-0 md:r-0 ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:-* utility to override elements and change their values when hovering over them.

<div class="l-0 h:r-0 ..."></div>