#Height

Updated
0.7.0

Classes to set the height of an element.

ClassStyles
h-10p
height: 10%;
h-20p
height: 20%;
h-30p
height: 30%;
h-40p
height: 40%;
h-50p
height: 50%;
h-60p
height: 60%;
h-70p
height: 70%;
h-80p
height: 80%;
h-90p
height: 90%;
h-100p
height: 100%;
h-0
height: 0;
h-auto
height: auto;
h-screen
height: 100vh;

#Scaled Heights

The h-{{value}} classes gives an element a percentage based height.

h-30p

h-50p

h-70p

h-90p

<div>
    <div class="h-30p">...</div>
    <div class="h-50p">...</div>
    <div class="h-70p">...</div>
    <div class="h-90p">...</div>
</div>

#Screen Height

The h-screen class makes an element span the entire viewport.

h-screen

<div>
    <div class="h-screen">...</div>
</div>

#Auto

The h-auto class makes an element use a browser determined height. This is commonly used to unset a previously set height.

h-auto

<div>
    <div class="h-auto">...</div>
</div>

#Responsive

New
0.7.0

All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use h-30p-md to apply h-30p on medium screens and above.

<div class="h-30p-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.