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

Add padding to a single side

Add horizontal padding

Add vertical padding