Spacing

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
    • r for right
    • b for bottom
    • l for left
    • 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
  • 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 4 spacing utilities