Width

  1. Utilities
  2. Width
Set Width

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

.wd-80
.wd-150
.wd-100
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.

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.