Share your feedback

Padding

Assign responsive-friendly padding values to an element or a subset of its sides with shorthand classes.

👉
spacing , margin , padding , gap
Class
Properties
p-0
p-1
p-2
p-3
p-4
p-5
p-6
p-7
p-8
p-10
p-12
p-16
p-20
p-24
p-32
p-40
p-48
p-56
p-64
p-72
p-80
p-88
p-96
p-px
py-0
py-1
py-2
py-3
py-4
py-5
py-6
py-7
py-8
py-10
py-12
py-16
py-20
py-24
py-32
py-40
py-48
py-56
py-64
py-72
py-80
py-88
py-96
py-px
px-0
px-1
px-2
px-3
px-4
px-5
px-6
px-7
px-8
px-10
px-12
px-16
px-20
px-24
px-32
px-40
px-48
px-56
px-64
px-72
px-80
px-88
px-96
px-px
pt-0
pt-1
pt-2
pt-3
pt-4
pt-5
pt-6
pt-7
pt-8
pt-10
pt-12
pt-16
pt-20
pt-24
pt-32
pt-40
pt-48
pt-56
pt-64
pt-72
pt-80
pt-88
pt-96
pt-px
pe-0
pe-1
pe-2
pe-3
pe-4
pe-5
pe-6
pe-7
pe-8
pe-10
pe-12
pe-16
pe-20
pe-24
pe-32
pe-40
pe-48
pe-56
pe-64
pe-72
pe-80
pe-88
pe-96
pe-px
pb-0
pb-1
pb-2
pb-3
pb-4
pb-5
pb-6
pb-7
pb-8
pb-10
pb-12
pb-16
pb-20
pb-24
pb-32
pb-40
pb-48
pb-56
pb-64
pb-72
pb-80
pb-88
pb-96
pb-px
ps-0
ps-1
ps-2
ps-3
ps-4
ps-5
ps-6
ps-7
ps-8
ps-10
ps-12
ps-16
ps-20
ps-24
ps-32
ps-40
ps-48
ps-56
ps-64
ps-72
ps-80
ps-88
ps-96
ps-px

Usage

Individual padding

pt-5
pe-5
pb-5
ps-5 
<div class="pb-5"></div>
<div class="pe-5"></div>
<div class="pt-5"></div>
<div class="ps-5"></div>

Axis padding

m-5
my-5
mx-5 
<div class="p-5"></div>
<div class="py-5"></div>
<div class="px-5"></div>

Responsive

Responsive variations also exist for each padding value. Use the .p-{breakpoint}-{value} or .p{position}-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing padding utility.

<!-- All sides -->
<div class="p-10 p-lg-20 ..."></div>

<!-- Individual side -->
<div class="pb-10 pb-lg-20 ..."></div>
Your experience on this site will be improved by allowing cookies.