Bottom / Left / Right / Top

Bottom

Controls the bottom placement of positioned elements.

Utility	Properties
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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
Failed to load data. Please try again later.

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:l-*,md:l-*, lg:l-*, and xxl:l-* 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:l-* utility to override elements and change their values when hovering over them.

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