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;
Padding documentation last updated Thursday, June 11, 2026