Padding Values
It is Very Easy to Customize and it uses in website apllication.
.pd-l-10
.pd-l-20
.pd-l-30
Padding-top Values
| Classes | .pd-t-[value] |
| Values | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| Bigger Values | 15 | 20 | 25 | 30 | ... | 120 (step of 5) |
| Even Bigger Values | 110 | 120 | 130 | 140 | ... | 200 (step of 10) |
Padding-Left Values
| Classes | .pd-l-[value] |
| Values | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| Bigger Values | 15 | 20 | 25 | 30 | ... | 120 (step of 5) |
| Even Bigger Values | 110 | 120 | 130 | 140 | ... | 200 (step of 10) |
Padding-right Values
| Classes | .pd-r-[value] |
| Values | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| Bigger Values | 15 | 20 | 25 | 30 | ... | 120 (step of 5) |
| Even Bigger Values | 110 | 120 | 130 | 140 | ... | 200 (step of 10) |
Padding-bottom Values
| Classes | .pd-b-[value] |
| Values | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| Bigger Values | 15 | 20 | 25 | 30 | ... | 120 (step of 5) |
| Even Bigger Values | 110 | 120 | 130 | 140 | ... | 200 (step of 10) |
Media Query Padding
It is Very Easy to Customize and it uses in website apllication.
| Class | Value |
|---|---|
.pd-[size]-t-[value] |
size: xs | sm | md | lg | xl value: the padding value (refer to code above) |