Use height utilities to quickly set a height of an element.
You can set a height to an element instantly by using the following utilities classes for height.
Class Reference
| Smaller Height | Value |
|---|---|
.ht-[value] |
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| Regular Height | Value |
|---|---|
.ht-[value] |
15 | 20 | 25 | 30 | ... | 100 (step of 5) |
| Bigger Height | Value |
|---|---|
.ht-[value] |
150 | 200 | 250 | 300 | ... | 850 (step of 50) |
You can set a height through percentage using the following utilities classes.
| Class | Value |
|---|---|
.ht-[value]p |
10 | 20 | 30 | 40 | ... | 100 (step of 10) |
You can also set a height to a different media query using the following utilities classes.
Sample Code
<div class="ht-50 ht-md-60 ht-lg-100"></div>Class Reference
| Class | Value |
|---|---|
.ht-[size]-[value] |
size: xs | sm | md | lg | xl value: the height value (refer to code above) |
.ht-[size]-[value]p |
You can also set a height using the extra utilities classes below.
| Class | Description |
|---|---|
.ht-100v |
Set a height to an element based on viewport height. |
.ht-auto |
Set an auto height to an element. |