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
• s - padding-left (l in v4.x)
• e - padding-right (r in v4.x)
• 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>