Spacing
To set spacing on an element use m for margin or p for padding, then specify a direction from t,b,l,r (or leave blank for all), and add a size from -0 to -7 or -min.
For example, for a top padding of 5em, you would use pt-5, for an all around minimal margin, you would use .m-min.
These variations are also available for specific breakpoints.
For example, if you want to give an element extra padding on desktop, you would add --lg to make .p-7--lg
Available breakpoint modifiers are --md --lg --xl --xxl.
Additionally, you can use .mb-0--last to remove margin from the last child in a container.
| Spacing type | Which side(s)? | How much? | Class | |||
|---|---|---|---|---|---|---|
| Margin | m |
Leave blank for all | |
.5em | min |
.m-min |
| From 0 to 7em |
0 to 7
|
.m-0
.m-1
.m-2
.m-3
.m-4
.m-5
.m-6
.m-7
|
||||
| Margin | m |
Top | t |
.5em | min |
.mt-min |
| From 0 to 7em |
0 to 7
|
.mt-0
.mt-1
.mt-2
.mt-3
.mt-4
.mt-5
.mt-6
.mt-7
|
||||
| Margin | m |
Bottom | b |
.5em | min |
.mb-min |
| From 0 to 7em |
0 to 7
|
.mb-0
.mb-1
.mb-2
.mb-3
.mb-4
.mb-5
.mb-6
.mb-7
|
||||
| Margin | m |
Left | l |
.5em | min |
.ml-min |
| From 0 to 7em |
0 to 7
|
.ml-0
.ml-1
.ml-2
.ml-3
.ml-4
.ml-5
.ml-6
.ml-7
|
||||
| Margin | m |
Right | r |
.5em | min |
.mr-min |
| From 0 to 7em |
0 to 7
|
.mr-0
.mr-1
.mr-2
.mr-3
.mr-4
.mr-5
.mr-6
.mr-7
|
||||
| Margin | m |
Vertical | y |
.5em | min |
.my-min |
| From 0 to 7em |
0 to 7
|
.my-0
.my-1
.my-2
.my-3
.my-4
.my-5
.my-6
.my-7
|
||||
| Margin | m |
Horizontal | x |
.5em | min |
.mx-min |
| From 0 to 7em |
0 to 7
|
.mx-0
.mx-1
.mx-2
.mx-3
.mx-4
.mx-5
.mx-6
.mx-7
|
||||
| Padding | p |
Leave blank for all | |
.5em | min |
.p-min |
| From 0 to 7em |
0 to 7
|
.p-0
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
.p-7
|
||||
| Padding | p |
Top | t |
.5em | min |
.pt-min |
| From 0 to 7em |
0 to 7
|
.pt-0
.pt-1
.pt-2
.pt-3
.pt-4
.pt-5
.pt-6
.pt-7
|
||||
| Padding | p |
Bottom | b |
.5em | min |
.pb-min |
| From 0 to 7em |
0 to 7
|
.pb-0
.pb-1
.pb-2
.pb-3
.pb-4
.pb-5
.pb-6
.pb-7
|
||||
| Padding | p |
Left | l |
.5em | min |
.pl-min |
| From 0 to 7em |
0 to 7
|
.pl-0
.pl-1
.pl-2
.pl-3
.pl-4
.pl-5
.pl-6
.pl-7
|
||||
| Padding | p |
Right | r |
.5em | min |
.pr-min |
| From 0 to 7em |
0 to 7
|
.pr-0
.pr-1
.pr-2
.pr-3
.pr-4
.pr-5
.pr-6
.pr-7
|
||||
| Padding | p |
Vertical | y |
.5em | min |
.py-min |
| From 0 to 7em |
0 to 7
|
.py-0
.py-1
.py-2
.py-3
.py-4
.py-5
.py-6
.py-7
|
||||
| Padding | p |
Horizontal | x |
.5em | min |
.px-min |
| From 0 to 7em |
0 to 7
|
.px-0
.px-1
.px-2
.px-3
.px-4
.px-5
.px-6
.px-7
|
||||
Negative
You can also set negative margin on elements. For example, for a top and bottom negative margin of 2em, you would use .my-n2.
These variations are also available for specific breakpoints.
For example, to only use negative margin on desktop, you would add --lg to make .my-n2--lg
Available breakpoint modifiers are --md --lg --xl --xxl.
| Spacing type | Which side(s)? | How much? | Class | |||
|---|---|---|---|---|---|---|
| Margin | m |
Top | t |
From -1 to -7em |
n1 to n7
|
.mt-n1
.mt-n2
.mt-n3
.mt-n4
.mt-n5
.mt-n6
.mt-n7
|
| Margin | m |
Bottom | b |
From -1 to -7em |
n1 to n7
|
.mb-n1
.mb-n2
.mb-n3
.mb-n4
.mb-n5
.mb-n6
.mb-n7
|
| Margin | m |
Left | l |
From -1 to -7em |
n1 to n7
|
.ml-n1
.ml-n2
.ml-n3
.ml-n4
.ml-n5
.ml-n6
.ml-n7
|
| Margin | m |
Vertical | y |
From -1 to -7em |
n1 to n7
|
.my-n1
.my-n2
.my-n3
.my-n4
.my-n5
.my-n6
.my-n7
|