Spacing
A utility class to responsively modify the space around an element.
Usage
Place the spacing utility class on an element that you want to change the spacing property for, this can be either padding or margin.
You can set responsive spacing by adding an infix of the breakpoint you need. e.g. p-md-3 or m-sm-2 which will add padding to medium screens and above and margin to small screens and above respectively.
Modifier selectors
| Modifier selector | Description |
|---|---|
{p/m}-{sm/md/lg}-0 |
Set the padding or margin to 0 for a given breakpoint |
{p/m}-0 |
Set the padding or margin to 0 for all breakpoints |
{p/m}-{sm/md/lg}-1 |
Set the padding or margin to 8px for a given breakpoint |
{p/m}-1 |
Set the padding or margin to 8px for all breakpoints |
{p/m}-{sm/md/lg}-2 |
Set the padding or margin to 12px for a given breakpoint |
{p/m}-2 |
Set the padding or margin to 12px for all breakpoints |
{p/m}-{sm/md/lg}-3 |
Set the padding or margin to 16px for a given breakpoint |
{p/m}-3 |
Set the padding or margin to 16px for all breakpoints |
{p/m}-{sm/md/lg}-4 |
Set the padding or margin to 24px for a given breakpoint |
{p/m}-4 |
Set the padding or margin to 24px for all breakpoints |
{p/m}-{sm/md/lg}-5 |
Set the padding or margin to 32px for a given breakpoint |
{p/m}-5 |
Set the padding or margin to 32px for all breakpoints |
{p/m}-{sm/md/lg}-6 |
Set the padding or margin to 40px for a given breakpoint |
{p/m}-6 |
Set the padding or margin to 40px for all breakpoints |
{p/m}-{sm/md/lg}-7 |
Set the padding or margin to 80px for a given breakpoint |
{p/m}-7 |
Set the padding or margin to 80px for all breakpoints |
.p-0 - Padding 0
p-0
.p-1 - Padding 8px
p-1
.p-2 - Padding 12px
p-2
.p-3 - Padding 16px
p-3
.p-4 - Padding 24px
p-4
.p-5 - Padding 32px
p-5
.p-6 - Padding 40px
p-6
.p-7 - Padding 80px
p-7
.pt-7 - Padding top 80px
pt-7
.pr-7 - Padding right 80px
pr-7
.pb-7 - Padding bottom 80px
pb-7
.pl-7 - Padding left 80px
pl-7
.py-7 - Padding top and bottom 80px
py-7
.px-7 - Padding left and right 80px
px-7