Height

  1. Utilities
  2. Height
Set Height

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

.ht-80
.ht-150
.ht-100
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)
Percentage Height

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)
Media Query Height

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

Class Value
.ht-[size]-[value]

size: xs | sm | md | lg | xl

value: the height value (refer to code above)
.ht-[size]-[value]p
Extra Height Classes

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.