Padding

Specifies the space between the content and its border.

Classes
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;
Single Side Padding

Padding can be specified on a specific edge.

pt-5
pr-4
pb-3
pl-6

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="pt-5 bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">pt-5</div>
    </div>
    <div class="pr-4 bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">pr-4</div>
    </div>
    <div class="pb-3 bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">pb-3</div>
    </div>
    <div class="pl-6 bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">pl-6</div>
    </div>
</div>

Horizontal Padding

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

px-6

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="px-6 bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">px-6</div>
    </div>
</div>

Vertical Padding

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

py-5

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="py-5 bg-blue-50 shadow-1 m-3" style="width: 200px;">
        <div class="bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">py-5</div>
    </div>
</div>

Responsive

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-5 and px-0 on small screen

<div class="card flex flex-wrap align-items-center justify-content-center">
    <div class="py-5 px-0 md:px-5 md:py-0 bg-blue-50 shadow-1 m-3">
        <div class="bg-blue-100 text-blue-500 font-bold shadow-2 p-3 flex align-items-center justify-content-center">py-5 and px-0 on small screen</div>
    </div>
</div>