Padding
Assign responsive-friendly padding values to an element or a subset of its sides with shorthand classes.
|
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>