Adding margins

Names of classes match to the following formula

m{side}{-breakpoints}{-size}

Where the side value corresponds to css style(s):

  • t - margin-top
  • b - margin-bottom
  • l - margin-left
  • r - margin-right
  • x - margin-right and margin-left
  • y - margin-top and margin-bottom
  • the empty value corresponds to all sides

Where size value is one of:

  • 0 - removes margin
  • 1 - $spacer * .25
  • 2 - $spacer * .5
  • 3 - $spacer * 1
  • 4 - $spacer * 1.5
  • 5 - $spacer * 3
  • auto - corresponds to auto margins

You can add more sizes by adding entries to the $spacers Sass map variable.

<!-- Adds small margins for small screens and higher.
And for very large screens adds large margins. -->
<div class="m-1 m-xl-4">...</div>