Right

Set the right placement of positioned elements.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

r-0
right: 0;
r-1
right: .25rem;
r-2
right: .5rem;
r-3
right: .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-17
right: 4.25rem;
r-18
right: 4.5rem;
r-19
right: 4.75rem;
r-20
right: 5rem;
r-21
right: 5.25rem;
r-22
right: 5.5rem;
r-23
right: 5.75rem;
r-24
right: 6rem;
r-25
right: 6.25rem;
r-26
right: 6.5rem;
r-27
right: 6.75rem;
r-28
right: 7rem;
r-29
right: 7.25rem;
r-30
right: 7.5rem;
r-31
right: 7.75rem;
r-32
right: 8rem;
r-33
right: 8.25rem;
r-34
right: 8.5rem;
r-35
right: 8.75rem;
r-36
right: 9rem;
r-37
right: 9.25rem;
r-38
right: 9.5rem;
r-39
right: 9.75rem;
r-40
right: 10rem;
r-41
right: 10.25rem;
r-42
right: 10.5rem;
r-43
right: 10.75rem;
r-44
right: 11rem;
r-45
right: 11.25rem;
r-46
right: 11.5rem;
r-47
right: 11.75rem;
r-48
right: 12rem;
r-49
right: 12.25rem;
r-50
right: 12.5rem;
r-51
right: 12.75rem;
r-52
right: 13rem;
r-53
right: 13.25rem;
r-54
right: 13.5rem;
r-55
right: 13.75rem;
r-56
right: 14rem;
r-57
right: 14.25rem;
r-58
right: 14.5rem;
r-59
right: 14.75rem;
r-60
right: 15rem;
r-61
right: 15.25rem;
r-62
right: 15.5rem;
r-63
right: 15.75rem;
r-64
right: 16rem;
r-65
right: 16.25rem;
r-66
right: 16.5rem;
r-67
right: 16.75rem;
r-68
right: 17rem;
r-69
right: 17.25rem;
r-70
right: 17.5rem;
r-71
right: 17.75rem;
r-72
right: 18rem;
r-73
right: 18.25rem;
r-74
right: 18.5rem;
r-75
right: 18.75rem;
r-76
right: 19rem;
r-77
right: 19.25rem;
r-78
right: 19.5rem;
r-79
right: 19.75rem;
r-80
right: 20rem;
r-81
right: 20.25rem;
r-82
right: 20.5rem;
r-83
right: 20.75rem;
r-84
right: 21rem;
r-85
right: 21.25rem;
r-86
right: 21.5rem;
r-87
right: 21.75rem;
r-88
right: 22rem;
r-89
right: 22.25rem;
r-90
right: 22.5rem;
r-91
right: 22.75rem;
r-92
right: 23rem;
r-93
right: 23.25rem;
r-94
right: 23.5rem;
r-95
right: 23.75rem;
r-96
right: 24rem;
r-97
right: 24.25rem;
r-98
right: 24.5rem;
r-99
right: 24.75rem;
r-100
right: 25rem;
r-auto
right: auto;
r-full
right: 100%;
r-half
right: 50%;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:r-(value)
Small≥640px
md:r-(value)
Medium≥768px
lg:r-(value)
Large≥1024px
xxl:r-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:r-(value)

Negative Values

Use negative variants to position in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:r--(value)