Paddning Values
Padding Positions
.p-1
.pl-1
.pr-1
.pt-1
.pb-1
.px-1
.py-1
| Class | Description |
|---|---|
class="p-1" |
Add padding all sides to element. |
class="pl-1" |
Add padding left side to element. |
class="pr-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
.pl-0
.pr-0
.pt-0
.pb-0
.px-0
.py-0
| Class | Description |
|---|---|
class="p-0" |
Remove padding all sides to element. |
class="pl-0" |
Remove padding left side to element. |
class="pr-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]
.pr-[size]-[value]
.pl-[size]-[value]
|
size: xs | sm | md | lg | xl value: the padding value (refer to code above) |