Margin Bottom

Set an element's bottom margin.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to apply negative margins.

Use the -- syntax to apply negative numeric values.

Syntax:mb--(value)