Setting a Padding

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

Class Reference

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

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.

Sample Code

<div class="pd-t-50 pd-md-t-60 pd-lg-t-100"></div>

Class Reference

Class	Value
.pd-[size]-t-[value] .pd-[size]-r-[value] .pd-[size]-b-[value] .pd-[size]-l-[value]	size: xs | sm | md | lg | xl value: the padding value (refer to code above)