Bottom

Set the bottom placement of positioned elements.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to position in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:b--(value)