Specifies the space between the content and its border.

p-0padding: 0;
p-1padding: 0.25rem;
p-2padding: 0.5rem;
p-3padding: 1rem;
p-4padding: 1.5rem;
p-5padding: 2rem;
p-6padding: 3rem;
p-7padding: 4rem;
p-8padding: 5rem;
pt-0padding-top: 0;
pt-1padding-top: 0.25rem;
pt-2padding-top: 0.5rem;
pt-3padding-top: 1rem;
pt-4padding-top: 1.5rem;
pt-5padding-top: 2rem;
pt-6padding-top: 3rem;
pt-7padding-top: 4rem;
pt-8padding-top: 5rem;
pr-0padding-right: 0;
pr-1padding-right: 0.25rem;
pr-2padding-right: 0.5rem;
pr-3padding-right: 1rem;
pr-4padding-right: 1.5rem;
pr-5padding-right: 2rem;
pr-6padding-right: 3rem;
pr-7padding-right: 4rem;
pr-8padding-right: 5rem;
pb-0padding-bottom: 0;
pb-1padding-bottom: 0.25rem;
pb-2padding-bottom: 0.5rem;
pb-3padding-bottom: 1rem;
pb-4padding-bottom: 1.5rem;
pb-5padding-bottom: 2rem;
pb-6padding-bottom: 3rem;
pb-7padding-bottom: 4rem;
pb-8padding-bottom: 5rem;
pl-0padding-left: 0;
pl-1padding-left: 0.25rem;
pl-2padding-left: 0.5rem;
pl-3padding-left: 1rem;
pl-4padding-left: 1.5rem;
pl-5padding-left: 2rem;
pl-6padding-left: 3rem;
pl-7padding-left: 4rem;
pl-8padding-left: 5rem;
px-0padding-left: 0;
padding-right: 0;
px-1padding-left: 0.25rem;
padding-right: 0.25rem;
px-2padding-left: 0.5rem;
padding-right: 0.5rem;
px-3padding-left: 1rem;
padding-right: 1rem;
px-4padding-left: 1.5rem;
padding-right: 1.5rem;
px-5padding-left: 2rem;
padding-right: 2rem;
px-6padding-left: 3rem;
padding-right: 3rem;
px-7padding-left: 4rem;
padding-right: 4rem;
px-8padding-left: 5rem;
padding-right: 5rem;
py-0padding-top: 0;
padding-bottom: 0;
py-1padding-top: 0.25rem;
padding-bottom: 0.25rem;
py-2padding-top: 0.5rem;
padding-bottom: 0.5rem;
py-3padding-top: 1rem;
padding-bottom: 1rem;
py-4padding-top: 1.5rem;
padding-bottom: 1.5rem;
py-5padding-top: 2rem;
padding-bottom: 2rem;
py-6padding-top: 3rem;
padding-bottom: 3rem;
py-7padding-top: 4rem;
padding-bottom: 4rem;
py-8padding-top: 5rem;
padding-bottom: 5rem;

Padding can be specified on a specific edge.

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="pt-5 bg-primary-100 w-12rem m-3 border-round">
        <div class="border-round-bottom bg-primary font-bold p-3 flex align-items-center justify-content-center">pt-5</div>
    <div class="pr-8 bg-primary-100 w-12rem m-3 border-round">
        <div class="border-round-left bg-primary font-bold p-3 flex align-items-center justify-content-center">pr-8</div>
    <div class="pb-3 bg-primary-100 w-12rem m-3 border-round">
        <div class="border-round-top bg-primary font-bold p-3 flex align-items-center justify-content-center">pb-3</div>
    <div class="pl-6 bg-primary-100 w-12rem m-3 border-round">
        <div class="border-round-right bg-primary font-bold p-3 flex align-items-center justify-content-center">pl-6</div>

Same padding value can be defined at the left and right sides with shorthand classes.

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="px-6 bg-primary-100 w-12rem m-3 border-round">
        <div class="border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">px-6</div>

Same padding value can also be defined at the top and bottom sides with shorthand classes.

<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="py-5 bg-primary-100 w-12rem m-3 border-round">
        <div class="border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">py-5</div>

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:p-3 to use a responsive class.

sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors
py-6 and px-0 on small screen
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="py-6 px-0 md:px-6 md:py-0 bg-primary-100 w-20rem m-3 border-round">
        <div class="border-round bg-primary font-bold p-3 flex align-items-center justify-content-center">py-6 and px-0 on small screen</div>