Bottom / Left / Right / Top

Bottom

Controls the bottom placement of positioned elements.

Class	Properties
dir-b-0	bottom: 0rem;
dir-b-1	bottom: 0.25rem;
dir-b-2	bottom: 0.5rem;
dir-b-3	bottom: 0.75rem;
dir-b-4	bottom: 1rem;
dir-b-5	bottom: 1.25rem;
dir-b-6	bottom: 1.5rem;
dir-b-7	bottom: 1.75rem;
dir-b-8	bottom: 2rem;
dir-b-9	bottom: 2.25rem;
dir-b-10	bottom: 2.5rem;
dir-b-11	bottom: 2.75rem;
dir-b-12	bottom: 3rem;
dir-b-13	bottom: 3.25rem;
dir-b-14	bottom: 3.5rem;
dir-b-15	bottom: 3.75rem;
dir-b-16	bottom: 4rem;
dir-b-none	bottom: none;

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Inset

Controls the placement of positioned elements in all directions.

Class	Properties
dir-i-0	inset: 0rem;
dir-i-1	inset: 0.25rem;
dir-i-2	inset: 0.5rem;
dir-i-3	inset: 0.75rem;
dir-i-4	inset: 1rem;
dir-i-5	inset: 1.25rem;
dir-i-6	inset: 1.5rem;
dir-i-7	inset: 1.75rem;
dir-i-8	inset: 2rem;
dir-i-9	inset: 2.25rem;
dir-i-10	inset: 2.5rem;
dir-i-11	inset: 2.75rem;
dir-i-12	inset: 3rem;
dir-i-13	inset: 3.25rem;
dir-i-14	inset: 3.5rem;
dir-i-15	inset: 3.75rem;
dir-i-16	inset: 4rem;
dir-i-none	inset: none;

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Left

Controls the left placement of positioned elements.

Class	Properties
dir-l-0	left: 0rem;
dir-l-1	left: 0.25rem;
dir-l-2	left: 0.5rem;
dir-l-3	left: 0.75rem;
dir-l-4	left: 1rem;
dir-l-5	left: 1.25rem;
dir-l-6	left: 1.5rem;
dir-l-7	left: 1.75rem;
dir-l-8	left: 2rem;
dir-l-9	left: 2.25rem;
dir-l-10	left: 2.5rem;
dir-l-11	left: 2.75rem;
dir-l-12	left: 3rem;
dir-l-13	left: 3.25rem;
dir-l-14	left: 3.5rem;
dir-l-15	left: 3.75rem;
dir-l-16	left: 4rem;
dir-l-none	left: none;

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Right

Controls the right placement of positioned elements.

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

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

Top

Controls the top placement of positioned elements.

Class	Properties
dir-t-0	top: 0rem;
dir-t-1	top: 0.25rem;
dir-t-2	top: 0.5rem;
dir-t-3	top: 0.75rem;
dir-t-4	top: 1rem;
dir-t-5	top: 1.25rem;
dir-t-6	top: 1.5rem;
dir-t-7	top: 1.75rem;
dir-t-8	top: 2rem;
dir-t-9	top: 2.25rem;
dir-t-10	top: 2.5rem;
dir-t-11	top: 2.75rem;
dir-t-12	top: 3rem;
dir-t-13	top: 3.25rem;
dir-t-14	top: 3.5rem;
dir-t-15	top: 3.75rem;
dir-t-16	top: 4rem;
dir-t-none	top: none;

We are currently working on this example.

<p class="fw-600 ta-c">We are currently working on this example.</p>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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

<div class="dir-1 md:dir-2 ..."></div>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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

<div class="dir-1 h:dir-2 ..."></div>