Height
Utilities for controlling the height of an element
👉
|
Class
|
Properties
|
|---|---|
| h-0 | |
| h-1 | |
| h-2 | |
| h-3 | |
| h-4 | |
| h-5 | |
| h-6 | |
| h-7 | |
| h-8 | |
| h-10 | |
| h-12 | |
| h-16 | |
| h-20 | |
| h-24 | |
| h-32 | |
| h-40 | |
| h-48 | |
| h-56 | |
| h-64 | |
| h-72 | |
| h-80 | |
| h-88 | |
| h-96 | |
| h-1/2 | |
| h-1/3 | |
| h-2/3 | |
| h-1/4 | |
| h-2/4 | |
| h-3/4 | |
| h-1/5 | |
| h-2/5 | |
| h-3/5 | |
| h-4/5 | |
| h-1/6 | |
| h-2/6 | |
| h-3/6 | |
| h-4/6 | |
| h-5/6 | |
| h-11/10 | |
| h-12/10 | |
| h-13/10 | |
| h-14/10 | |
| h-15/10 | |
| h-px | |
| h-auto | |
| h-full | |
| h-screen |
Fixed height
Fixed heights includes support for all the values in the $spacers Sass map.
<div class="h-10"></div>
<div class="h-20"></div>
<div class="h-32"></div>
<div class="h-48"></div>
Relative to the parent
Fluid heights includes support for all the values in the $percentage-sizers Sass map.
<div class="h-1/4"></div>
<div class="h-1/2"></div>
<div class="h-2/3"></div>
<div class="h-full"></div>
Relative to the viewport
You can also use utilities to set the height relative to the viewport.
<div class="h-screen"></div>
Auto
<div class="h-auto"></div>
Responsive
Responsive variations also exist for each height value. Use the .h-{breakpoint}-{value} for sm, md, lg, xl, and xxl to any existing height utility.
<div class="h-full h-md-16 ..."></div>