Spacing

Spacing (margins and paddings) are handled with bootstrap classes. They are named using the format [property][sides]-[breakpoint]-[size], where [sides] and [breakpoint] are optional values.

Notation

• property
  • m for margin
  • p for padding
• sides
  • t for top
  • e for end
  • b for bottom
  • s for start
  • x for left and right
  • y for top and bottom
  • blank for all sides
• breakpoint
  • sm Small devices (e.g. phones), at least 576px wide
  • md Medium devices (e.g. tables), at least 768px wide
  • lg Large devices (e.g. desktops screens), at least 992px wide
  • xl Very large devices (e.g. high resolution desktop screens), at least 1200px wide
  • xxl Very large devices (e.g. high resolution desktop screens), at least 1400px wide
• size
  • 0-5 an increasing scale starting with nothing
  • auto for auto, only applicable with m

Examples

• mt-2 Top margin of size 2
• px-0 No horizontal padding
• m-5 Margin on all sides of size 5
• mx-auto Automatic horizontal margin, this will center an element if it has a width and is a block element
• mb-lg-5 Bottom margin of size 5 if browser window is wider than lg

<div class="m-5">
  This element will have a margin of 5 pixels
</div>

Bootstrap

Bootstrap’s own documentation can be found here Bootstrap 5 spacing utilities