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) |