Padding
Utilities for setting an element's interior spacing between child elements and the element's box edge.
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-p24 | padding: 2.4rem !important |
.d-p32 | padding: 3.2rem !important |
.d-p48 | padding: 4.8rem !important |
.d-p64 | padding: 6.4rem !important |
.d-p72 | padding: 7.2rem !important |
.d-p84 | padding: 8.4rem !important |
.d-p96 | padding: 9.6rem !important |
.d-p102 | padding: 10.2rem !important |
.d-p114 | padding: 11.4rem !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-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-pt72 | padding-top: 7.2rem !important; |
.d-pt84 | padding-top: 8.4rem !important; |
.d-pt96 | padding-top: 9.6rem !important; |
.d-pt102 | padding-top: 10.2rem !important; |
.d-pt114 | padding-top: 11.4rem !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-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-pr72 | padding-right: 7.2rem !important; |
.d-pr84 | padding-right: 8.4rem !important; |
.d-pr96 | padding-right: 9.6rem !important; |
.d-pr102 | padding-right: 10.2rem !important; |
.d-pr114 | padding-right: 11.4rem !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-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-pb72 | padding-bottom: 7.2rem !important; |
.d-pb84 | padding-bottom: 8.4rem !important; |
.d-pb96 | padding-bottom: 9.6rem !important; |
.d-pb102 | padding-bottom: 10.2rem !important; |
.d-pb114 | padding-bottom: 11.4rem !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-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-pl72 | padding-left: 7.2rem !important; |
.d-pl84 | padding-left: 8.4rem !important; |
.d-pl96 | padding-left: 9.6rem !important; |
.d-pl102 | padding-left: 10.2rem !important; |
.d-pl114 | padding-left: 11.4rem !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-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-px72 | padding-right: 7.2rem !important; padding-left: 7.2rem !important; |
.d-px84 | padding-right: 8.4rem !important; padding-left: 8.4rem !important; |
.d-px96 | padding-right: 9.6rem !important; padding-left: 9.6rem !important; |
.d-px102 | padding-right: 10.2rem !important; padding-left: 10.2rem !important; |
.d-px114 | padding-right: 11.4rem !important; padding-left: 11.4rem !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-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-py72 | padding-top: 7.2rem !important; padding-bottom: 7.2rem !important; |
.d-py84 | padding-top: 8.4rem !important; padding-bottom: 8.4rem !important; |
.d-py96 | padding-top: 9.6rem !important; padding-bottom: 9.6rem !important; |
.d-py102 | padding-top: 10.2rem !important; padding-bottom: 10.2rem !important; |
.d-py114 | padding-top: 11.4rem !important; padding-bottom: 11.4rem !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; |
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-px24 ...">d-px24</div>
Add vertical padding
<div class="d-py24 ...">d-py24</div>