Left

Set the left placement of positioned elements.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:l-(value)
Small≥640px
md:l-(value)
Medium≥768px
lg:l-(value)
Large≥1024px
xxl:l-(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:l-(value)

Negative Values

Use negative variants to position in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:l--(value)