Padding Bottom

Set an element's bottom padding.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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