Height

Quick reference

Basic usage

Fixed height

Use h-{number} to set an element to a fixed height.

<div class="h-100 ..."></div>
<div class="h-75 ..."></div>
<div class="h-50 ..."></div>
<div class="h-25 ..."></div>

Full height

Use h-100 to set an element’s height to 100% of its parent, as long as the parent has a defined height.

<div class="h-48">
  <div class="h-100 ...">
    <!-- This element will have a height of `12rem` (h-48) -->
  </div>
</div>

Vewport height

Use vh-100 to make an element span the entire height of the viewport.

<div class="vh-100"></div>

Max height

Use mh-100 to set the maximum height of an element that is full, depending on the parent element.

<div style="height:100px">
  <div style="height:200px">
    max-height 100%
  </div>
</div>