loaderDashtic logouser-imgDashtic logoimg

Paddning Values

  1. Home
  2. Elements
  3. Paddning Values
Padding Positions
.p-1
.pl-1
.pr-1
.pt-1
.pb-1
.px-1
.py-1
ClassDescription
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
ClassDescription
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
ClassDescription
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
ClassValue
.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)