Width
Use width utilities to quickly style the width of an element. Great for cards, buttons, or any other element.
Set a Width
You can set a width to an element instantly by using the following utilities classes for width.
.wd-80
.wd-150
.wd-100
<div class="wd-80 ht-80 bg-gray-400">.wd-80</div>
<div class="wd-150 ht-80 bg-gray-400 mg-l-20">.wd-150</div>
<div class="wd-100 ht-80 bg-gray-400 mg-l-20">.wd-100</div>| 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. |