Specifies the space between the content and its border.
| Class | Properties |
|---|---|
| p-0 | padding: 0; |
| p-1 | padding: 0.25rem; |
| p-2 | padding: 0.5rem; |
| p-3 | padding: 1rem; |
| p-4 | padding: 1.5rem; |
| p-5 | padding: 2rem; |
| p-6 | padding: 3rem; |
| p-7 | padding: 4rem; |
| p-8 | padding: 5rem; |
| pt-0 | padding-top: 0; |
| pt-1 | padding-top: 0.25rem; |
| pt-2 | padding-top: 0.5rem; |
| pt-3 | padding-top: 1rem; |
| pt-4 | padding-top: 1.5rem; |
| pt-5 | padding-top: 2rem; |
| pt-6 | padding-top: 3rem; |
| pt-7 | padding-top: 4rem; |
| pt-8 | padding-top: 5rem; |
| pr-0 | padding-right: 0; |
| pr-1 | padding-right: 0.25rem; |
| pr-2 | padding-right: 0.5rem; |
| pr-3 | padding-right: 1rem; |
| pr-4 | padding-right: 1.5rem; |
| pr-5 | padding-right: 2rem; |
| pr-6 | padding-right: 3rem; |
| pr-7 | padding-right: 4rem; |
| pr-8 | padding-right: 5rem; |
| pb-0 | padding-bottom: 0; |
| pb-1 | padding-bottom: 0.25rem; |
| pb-2 | padding-bottom: 0.5rem; |
| pb-3 | padding-bottom: 1rem; |
| pb-4 | padding-bottom: 1.5rem; |
| pb-5 | padding-bottom: 2rem; |
| pb-6 | padding-bottom: 3rem; |
| pb-7 | padding-bottom: 4rem; |
| pb-8 | padding-bottom: 5rem; |
| pl-0 | padding-left: 0; |
| pl-1 | padding-left: 0.25rem; |
| pl-2 | padding-left: 0.5rem; |
| pl-3 | padding-left: 1rem; |
| pl-4 | padding-left: 1.5rem; |
| pl-5 | padding-left: 2rem; |
| pl-6 | padding-left: 3rem; |
| pl-7 | padding-left: 4rem; |
| pl-8 | padding-left: 5rem; |
| px-0 | padding-left: 0; padding-right: 0; |
| px-1 | padding-left: 0.25rem; padding-right: 0.25rem; |
| px-2 | padding-left: 0.5rem; padding-right: 0.5rem; |
| px-3 | padding-left: 1rem; padding-right: 1rem; |
| px-4 | padding-left: 1.5rem; padding-right: 1.5rem; |
| px-5 | padding-left: 2rem; padding-right: 2rem; |
| px-6 | padding-left: 3rem; padding-right: 3rem; |
| px-7 | padding-left: 4rem; padding-right: 4rem; |
| px-8 | padding-left: 5rem; padding-right: 5rem; |
| py-0 | padding-top: 0; padding-bottom: 0; |
| py-1 | padding-top: 0.25rem; padding-bottom: 0.25rem; |
| py-2 | padding-top: 0.5rem; padding-bottom: 0.5rem; |
| py-3 | padding-top: 1rem; padding-bottom: 1rem; |
| py-4 | padding-top: 1.5rem; padding-bottom: 1.5rem; |
| py-5 | padding-top: 2rem; padding-bottom: 2rem; |
| py-6 | padding-top: 3rem; padding-bottom: 3rem; |
| py-7 | padding-top: 4rem; padding-bottom: 4rem; |
| py-8 | padding-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>
<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>
<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>
<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>
</div>
</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>
</div>
</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>
</div>
</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.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |
<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>
</div>
</div>