Padding
Padding Positions
.p-1
.ps-1
.pe-1
.pt-1
.pb-1
.px-1
.py-1
Class Description
class="p-1" Add padding all sides to element.
class="ps-1" Add padding left side to element.
class="pe-1" Add padding right side to element.
class="pt-1" Add padding top side to element.
class="pb-1" Add padding bottom side to element.
class="px-1" Add padding horizonatl sides to element.
class="py-1" Add padding vertical sides to element.
Padding values
.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
Class Description
class="p-1" Add padding p-1 to element.
class="p-2" Add padding p-2 to element.
class="p-3" Add padding p-3 to element.
class="p-4" Add padding p-4 to element.
class="p-5" Add padding p-5 to element.
class="p-6" Add padding p-6 to element.
class="p-7" Add padding p-7 to element.
class="p-8" Add padding p-8 to element.
Remove Padding
.p-0
.ps-0
.pe-0
.pt-0
.pb-0
.px-0
.py-0
Class Description
class="p-0" Remove padding all sides to element.
class="ps-0" Remove padding left side to element.
class="pe-0" Remove padding right side to element.
class="pt-0" Remove padding top side to element.
class="pb-0" Remove padding bottom side to element.
class="px-0" Remove padding horizonatl sides to element.
class="py-0" Remove padding vertical sides to element.
Media Query Padding
Class Value
.pt-[size]-[value] .pb-[size]-[value] .pe-[size]-[value] .ps-[size]-[value]

size: xs | sm | md | lg | xl

value: the padding value (refer to code above)