Bootstrap includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element’s appearance. Read the Official Bootstrap Documentation for a full list of instructions and other options.
Assign responsive-friendly margin and padding values to an element or a subset of its sides with shorthand classes.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.
| Where property is one of: | |
m |
for classes that set margin |
p |
for classes that set padding |
| Where sides is one of: | |
t |
for classes that set margin-top or padding-top |
b |
for classes that set margin-bottom or padding-bottom |
s |
for classes that set margin-left or padding-left |
e |
for classes that set margin-right or padding-right |
| Where size is one of: | |
0 |
for classes that eliminate the margin or padding by setting it to 0 |
1 |
for classes that set the margin or padding to $spacer * .25 |
2 |
for classes that set the margin or padding to $spacer * .5 |
3 |
for classes that set the margin or padding to $spacer |
4 |
for classes that set the margin or padding to $spacer * 1.5 |
5 |
for classes that set the margin or padding to $spacer * 3 |
auto |
for classes that set the margin to auto |
Additionally, Bootstrap also includes an .mx-auto class for horizontally centering fixed-width block level content
When using display: grid, you can make use of gap utilities on the parent grid container. This can save on having to add margin utilities to individual grid items.
