Spacing

Bootstrap 5 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px) or xxl (>=1400px)):

The classes are used in the format: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for smmdlgxl and xxl.

Where property is one of:

  • m – sets margin
  • p – sets padding

Where sides is one of:

  • t – sets margin-top or padding-top
  • b – sets margin-bottom or padding-bottom
  • s – sets margin-left or padding-left
  • e – sets margin-right or padding-right
  • x – sets both padding-left and padding-right or margin-left and margin-right
  • y – sets both padding-top and padding-bottom or margin-top and margin-bottom
  • blank – sets a margin or padding on all 4 sides of the element

Where size is one of:

  • 0 – sets margin or padding to 0
  • 1 – sets margin or padding to .25rem
  • 2 – sets margin or padding to .5rem
  • 3 – sets margin or padding to 1rem
  • 4 – sets margin or padding to 1.5rem
  • 5 – sets margin or padding to 3rem
  • auto – sets margin to auto

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *