Padding
Utilities for setting an element's interior spacing between child elements and the element's box edge.
Add Padding to All Sides #
<div class="d-p8 ...">d-p8</div>
Add Padding to a Single Side #
<div class="d-pt12 ...">d-pt12</div>
<div class="d-pr16 ...">d-pr16</div>
<div class="d-pb24 ...">d-pb24</div>
<div class="d-pl32 ...">d-pl32</div>
Add Horizontal Padding #
<div class="d-px16 ...">d-px16</div>
Add Vertical Padding #
<div class="d-py24 ...">d-py24</div>
Classes #
Padding can be added to an element by using a utility class (i.e. .d-p[#]) or by using a directional class (i.e. .d-p{t|r|b|l|y|x}[#]).
Class
|
Output
|
|---|---|
| .d-p0 | padding: 0 !important |
| .d-p1 | padding: .1rem !important |
| .d-p2 | padding: .2rem !important |
| .d-p4 | padding: .4rem !important |
| .d-p6 | padding: .6rem !important |
| .d-p8 | padding: .8rem !important |
| .d-p12 | padding: 1.2rem !important |
| .d-p16 | padding: 1.6rem !important |
| .d-p20 | padding: 2.0rem !important |
| .d-p24 | padding: 2.4rem !important |
| .d-p32 | padding: 3.2rem !important |
| .d-p48 | padding: 4.8rem !important |
| .d-p64 | padding: 6.4rem !important |
| .d-p96 | padding: 9.6rem !important |
| .d-p128 | padding: 12.8rem !important |
| .d-pt0 | padding-top: 0 !important; |
| .d-pt1 | padding-top: .1rem !important; |
| .d-pt2 | padding-top: .2rem !important; |
| .d-pt4 | padding-top: .4rem !important; |
| .d-pt6 | padding-top: .6rem !important; |
| .d-pt8 | padding-top: .8rem !important; |
| .d-pt12 | padding-top: 1.2rem !important; |
| .d-pt16 | padding-top: 1.6rem !important; |
| .d-pt20 | padding-top: 2.0rem !important; |
| .d-pt24 | padding-top: 2.4rem !important; |
| .d-pt32 | padding-top: 3.2rem !important; |
| .d-pt48 | padding-top: 4.8rem !important; |
| .d-pt64 | padding-top: 6.4rem !important; |
| .d-pt96 | padding-top: 9.6rem !important; |
| .d-pt128 | padding-top: 12.8rem !important; |
| .d-pr0 | padding-right: 0 !important; |
| .d-pr1 | padding-right: .1rem !important; |
| .d-pr2 | padding-right: .2rem !important; |
| .d-pr4 | padding-right: .4rem !important; |
| .d-pr6 | padding-right: .6rem !important; |
| .d-pr8 | padding-right: .8rem !important; |
| .d-pr12 | padding-right: 1.2rem !important; |
| .d-pr16 | padding-right: 1.6rem !important; |
| .d-pr20 | padding-right: 2.0rem !important; |
| .d-pr24 | padding-right: 2.4rem !important; |
| .d-pr32 | padding-right: 3.2rem !important; |
| .d-pr48 | padding-right: 4.8rem !important; |
| .d-pr64 | padding-right: 6.4rem !important; |
| .d-pr96 | padding-right: 9.6rem !important; |
| .d-pr128 | padding-right: 12.8rem !important; |
| .d-pb0 | padding-bottom: 0 !important; |
| .d-pb1 | padding-bottom: .1rem !important; |
| .d-pb2 | padding-bottom: .2rem !important; |
| .d-pb4 | padding-bottom: .4rem !important; |
| .d-pb6 | padding-bottom: .6rem !important; |
| .d-pb8 | padding-bottom: .8rem !important; |
| .d-pb12 | padding-bottom: 1.2rem !important; |
| .d-pb16 | padding-bottom: 1.6rem !important; |
| .d-pb20 | padding-bottom: 2.0rem !important; |
| .d-pb24 | padding-bottom: 2.4rem !important; |
| .d-pb32 | padding-bottom: 3.2rem !important; |
| .d-pb48 | padding-bottom: 4.8rem !important; |
| .d-pb64 | padding-bottom: 6.4rem !important; |
| .d-pb96 | padding-bottom: 9.6rem !important; |
| .d-pb128 | padding-bottom: 12.8rem !important; |
| .d-pl0 | padding-left: 0 !important; |
| .d-pl1 | padding-left: .1rem !important; |
| .d-pl2 | padding-left: .2rem !important; |
| .d-pl4 | padding-left: .4rem !important; |
| .d-pl6 | padding-left: .6rem !important; |
| .d-pl8 | padding-left: .8rem !important; |
| .d-pl12 | padding-left: 1.2rem !important; |
| .d-pl16 | padding-left: 1.6rem !important; |
| .d-pl20 | padding-left: 2.0rem !important; |
| .d-pl24 | padding-left: 2.4rem !important; |
| .d-pl32 | padding-left: 3.2rem !important; |
| .d-pl48 | padding-left: 4.8rem !important; |
| .d-pl64 | padding-left: 6.4rem !important; |
| .d-pl96 | padding-left: 9.6rem !important; |
| .d-pl128 | padding-left: 12.8rem !important; |
| .d-px0 |
padding-right: 0 !important; padding-left: 0 !important; |
| .d-px1 |
padding-right: .1rem !important; padding-left: .1rem !important; |
| .d-px2 |
padding-right: .2rem !important; padding-left: .2rem !important; |
| .d-px4 |
padding-right: .4rem !important; padding-left: .4rem !important; |
| .d-px6 |
padding-right: .6rem !important; padding-left: .6rem !important; |
| .d-px8 |
padding-right: .8rem !important; padding-left: .8rem !important; |
| .d-px12 |
padding-right: 1.2rem !important; padding-left: 1.2rem !important; |
| .d-px16 |
padding-right: 1.6rem !important; padding-left: 1.6rem !important; |
| .d-px20 |
padding-right: 2.0rem !important; padding-left: 2.0rem !important; |
| .d-px24 |
padding-right: 2.4rem !important; padding-left: 2.4rem !important; |
| .d-px32 |
padding-right: 3.2rem !important; padding-left: 3.2rem !important; |
| .d-px48 |
padding-right: 4.8rem !important; padding-left: 4.8rem !important; |
| .d-px64 |
padding-right: 6.4rem !important; padding-left: 6.4rem !important; |
| .d-px96 |
padding-right: 9.6rem !important; padding-left: 9.6rem !important; |
| .d-px128 |
padding-right: 12.8rem !important; padding-left: 12.8rem !important; |
| .d-py0 |
padding-top: 0 !important; padding-bottom: 0 !important; |
| .d-py1 |
padding-top: .1rem !important; padding-bottom: .1rem !important; |
| .d-py2 |
padding-top: .2rem !important; padding-bottom: .2rem !important; |
| .d-py4 |
padding-top: .4rem !important; padding-bottom: .4rem !important; |
| .d-py6 |
padding-top: .6rem !important; padding-bottom: .6rem !important; |
| .d-py8 |
padding-top: .8rem !important; padding-bottom: .8rem !important; |
| .d-py12 |
padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; |
| .d-py16 |
padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; |
| .d-py20 |
padding-top: 2.0rem !important; padding-bottom: 2.0rem !important; |
| .d-py24 |
padding-top: 2.4rem !important; padding-bottom: 2.4rem !important; |
| .d-py32 |
padding-top: 3.2rem !important; padding-bottom: 3.2rem !important; |
| .d-py48 |
padding-top: 4.8rem !important; padding-bottom: 4.8rem !important; |
| .d-py64 |
padding-top: 6.4rem !important; padding-bottom: 6.4rem !important; |
| .d-py96 |
padding-top: 9.6rem !important; padding-bottom: 9.6rem !important; |
| .d-py128 |
padding-top: 12.8rem !important; padding-bottom: 12.8rem !important; |
| .d-p-unset | padding: unset !important |
| .d-pt-unset | padding-top: unset !important; |
| .d-pr-unset | padding-right: unset !important; |
| .d-pb-unset | padding-bottom: unset !important; |
| .d-pl-unset | padding-left: unset !important; |
| .d-px-unset |
padding-right: unset !important; padding-left: unset !important; |
| .d-py-unset |
padding-top: unset !important; padding-bottom: unset !important; |