Setting a Width

You can set a width to an element instantly by using the following utilities classes for height.

Class Reference

Smaller Width	Value
.wd-[value]	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10

Regular Width	Value
.wd-[value]	15 | 20 | 25 | 30 | ... | 100   (step of 5)

Bigger Width	Value
.wd-[value]	150 | 200 | 250 | 300 | ... | 1000   (step of 50)

Percentage Width

You can set a width through percentage using the following utilities classes.

Class	Value
.wd-[value]p	10 | 20 | 30 | 40 | ... | 100   (step of 10)

Media Query Width

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

Sample Code

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

Class Reference

Class	Value
.wd-[size]-[value]	size: xs | sm | md | lg | xl value: the width value (refer to code above)
.wd-[size]-[value]p

Extra Width Classes

You can also set a width using the extra utilities classes below.

Class	Description
.wd-100v	Set a width to an element based on viewport width.
.wd-auto	Set an auto width to an element.