Padding and Margin Classes
Bootstrap provides spacing utilities to control the padding and margin of elements. The classes are based on a scale, where numbers represent the amount of spacing, with 1 being the smallest. You can apply padding or margin to one side, all sides, or specific sides of an element.
Padding Classes:
- p-{n}: Applies padding on all four sides of an element.
- pt-{n}: Applies padding to the top of an element.
- pb-{n}: Applies padding to the bottom of an element.
- py-{n}: Applies padding to the top and bottom of an element.
- ps-{n}: Applies padding to the left side of an element.
- pe-{n}: Applies padding to the right side of an element.
- px-{n}: Applies padding to the left and right sides of an element.
p-3 padding is added to all four sides of the element
pt-3 padding is added to the top of the element
pb-3 padding is added to the bottom of the element
py-3 padding is added to the top and bottom of the element
p-0 no padding
ps-3 padding is added to the left of the element
pe-3 padding is added to the right of the element
px-3 padding is added to the left and right of the element
Margin Classes:
- m-{n}: Applies margin on all four sides of an element.
- mt-{n}: Applies margin to the top of an element.
- mb-{n}: Applies margin to the bottom of an element.
- my-{n}: Applies margin to the top and bottom of an element.
- ms-{n}: Applies margin to the left side of an element.
- me-{n}: Applies margin to the right side of an element.
- mx-{n}: Applies margin to the left and right side of an element.
Responsive Spacing:
You can make the spacing responsive by adding screen size breakpoints (e.g., m-sm-2, mt-md-3).