Padding

  1. Utilities
  2. Padding
Set Padding

You can set a padding to an element instantly by using the following utilities classes.

.pd-t-30
.pd-t-50
.pd-t-70
Smaller Padding Value
.pd-t-[value]
.pd-r-[value]
.pd-b-[value]
.pd-l-[value]		 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
.pt-[value]
.pe-[value]
.pb-[value]
.ps-[value]		 0 | 1 | 2 | 3 | 4 | 5
Bigger Padding Value
.pd-t-[value]
.pd-r-[value]
.pd-b-[value]
.pd-l-[value]		 15 | 20 | 25 | 30 | ... | 120   (step of 5)
Even Bigger Padding Value
.pd-t-[value]
.pd-r-[value]
.pd-b-[value]
.pd-l-[value]		 110 | 120 | 130 | 140 | ... | 200   (step of 10)
Media Query Padding

You can also set a padding to a different media query using the following utilities classes.

Class Value
.pd-[size]-t-[value] (or) .pt-[size]-[value]
.pd-[size]-r-[value] (or) .pe-[size]-[value]
.pd-[size]-b-[value] (or) .pb-[size]-[value]
.pd-[size]-l-[value] (or) .ps-[size]-[value]

size: xs | sm | md | lg | xl

value: the padding value (refer to code above)