Adding paddings

Names of classes match to the following formula

p{side}{-breakpoints}{-size}

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

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

Where size value is one of:

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

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

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