Skip to content

Bottom / Left / Right / Top

Controls placement of positioned elements.

Bottom

Controls the bottom placement of positioned elements.

Utility Properties

bo-0

bottom: 0rem;

bo-1

bottom: 0.25rem;

bo-2

bottom: 0.5rem;

bo-3

bottom: 0.75rem;

bo-4

bottom: 1rem;

bo-5

bottom: 1.25rem;

bo-6

bottom: 1.5rem;

bo-7

bottom: 1.75rem;

bo-8

bottom: 2rem;

bo-9

bottom: 2.25rem;

bo-10

bottom: 2.5rem;

bo-11

bottom: 2.75rem;

bo-12

bottom: 3rem;

bo-13

bottom: 3.25rem;

bo-14

bottom: 3.5rem;

bo-15

bottom: 3.75rem;

bo-16

bottom: 4rem;

bo-full

bottom: 100%;

bo-half

bottom: 50%;
A
<div class="p-r d-18 rad-2 sm:d-32 tc-white">
<div class="p-a i-0 stripes rad-2 bo-1"></div>
<div class="p-a bo-0 l-0 d-f d-16 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

i-0

inset: 0rem;

i-1

inset: 0.25rem;

i-2

inset: 0.5rem;

i-3

inset: 0.75rem;

i-4

inset: 1rem;

i-5

inset: 1.25rem;

i-6

inset: 1.5rem;

i-7

inset: 1.75rem;

i-8

inset: 2rem;

i-9

inset: 2.25rem;

i-10

inset: 2.5rem;

i-11

inset: 2.75rem;

i-12

inset: 3rem;

i-13

inset: 3.25rem;

i-14

inset: 3.5rem;

i-15

inset: 3.75rem;

i-16

inset: 4rem;

i-full

inset: 100%;

i-half

inset: 50%;
A
<div class="p-r d-18 rad-2 sm:d-32 tc-white">
<div class="p-a i-0 stripes rad-2 bo-1"></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

ix-0

left: 0rem; right: 0rem;

ix-1

left: 0.25rem; right: 0.25rem;

ix-2

left: 0.5rem; right: 0.5rem;

ix-3

left: 0.75rem; right: 0.75rem;

ix-4

left: 1rem; right: 1rem;

ix-5

left: 1.25rem; right: 1.25rem;

ix-6

left: 1.5rem; right: 1.5rem;

ix-7

left: 1.75rem; right: 1.75rem;

ix-8

left: 2rem; right: 2rem;

ix-9

left: 2.25rem; right: 2.25rem;

ix-10

left: 2.5rem; right: 2.5rem;

ix-11

left: 2.75rem; right: 2.75rem;

ix-12

left: 3rem; right: 3rem;

ix-13

left: 3.25rem; right: 3.25rem;

ix-14

left: 3.5rem; right: 3.5rem;

ix-15

left: 3.75rem; right: 3.75rem;

ix-16

left: 4rem; right: 4rem;

ix-full

left: 100%; right: 100%;

ix-half

left: 50%; right: 50%;
A
<div class="p-r d-18 rad-2 sm:d-32 tc-white">
<div class="p-a i-0 stripes rad-2 bo-1"></div>
<div class="p-a t-0 ix-0 d-f h-16 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

iy-0

top: 0rem; bottom: 0rem;

iy-1

top: 0.25rem; bottom: 0.25rem;

iy-2

top: 0.5rem; bottom: 0.5rem;

iy-3

top: 0.75rem; bottom: 0.75rem;

iy-4

top: 1rem; bottom: 1rem;

iy-5

top: 1.25rem; bottom: 1.25rem;

iy-6

top: 1.5rem; bottom: 1.5rem;

iy-7

top: 1.75rem; bottom: 1.75rem;

iy-8

top: 2rem; bottom: 2rem;

iy-9

top: 2.25rem; bottom: 2.25rem;

iy-10

top: 2.5rem; bottom: 2.5rem;

iy-11

top: 2.75rem; bottom: 2.75rem;

iy-12

top: 3rem; bottom: 3rem;

iy-13

top: 3.25rem; bottom: 3.25rem;

iy-14

top: 3.5rem; bottom: 3.5rem;

iy-15

top: 3.75rem; bottom: 3.75rem;

iy-16

top: 4rem; bottom: 4rem;

iy-full

top: 100%; bottom: 100%;

iy-half

top: 50%; bottom: 50%;
A
<div class="p-r d-18 rad-2 sm:d-32 tc-white">
<div class="p-a i-0 stripes rad-2 bo-1"></div>
<div class="p-a iy-0 l-0 d-f w-16 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Left

Controls the left placement of positioned elements.

Utility Properties

l-0

left: 0rem;

l-1

left: 0.25rem;

l-2

left: 0.5rem;

l-3

left: 0.75rem;

l-4

left: 1rem;

l-5

left: 1.25rem;

l-6

left: 1.5rem;

l-7

left: 1.75rem;

l-8

left: 2rem;

l-9

left: 2.25rem;

l-10

left: 2.5rem;

l-11

left: 2.75rem;

l-12

left: 3rem;

l-13

left: 3.25rem;

l-14

left: 3.5rem;

l-15

left: 3.75rem;

l-16

left: 4rem;

l-full

left: 100%;

l-half

left: 50%;
A
<div class="p-r d-18 rad-2 sm:d-32 tc-white">
<div class="p-a i-0 stripes rad-2 bo-1"></div>
<div class="p-a t-0 l-0 d-f d-16 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

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 stripes rad-2 bo-1"></div>
<div class="p-a bo-0 r-0 d-f d-16 ai-c jc-c rad-2 bg-indigo p-4">A</div>
</div>

Top

Controls the top placement of positioned elements.

Utility Properties

t-0

top: 0rem;

t-1

top: 0.25rem;

t-2

top: 0.5rem;

t-3

top: 0.75rem;

t-4

top: 1rem;

t-5

top: 1.25rem;

t-6

top: 1.5rem;

t-7

top: 1.75rem;

t-8

top: 2rem;

t-9

top: 2.25rem;

t-10

top: 2.5rem;

t-11

top: 2.75rem;

t-12

top: 3rem;

t-13

top: 3.25rem;

t-14

top: 3.5rem;

t-15

top: 3.75rem;

t-16

top: 4rem;

t-full

top: 100%;

t-half

top: 50%;
A
<div class="p-r d-18 rad-2 sm:d-32 tc-white">
<div class="p-a i-0 stripes rad-2 bo-1"></div>
<div class="p-a t-0 r-0 d-f d-16 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 modifiers

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 modifiers

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>