Height

Utilities for setting the height of an element.

Contents

Quick reference

Class	Properties
`.h-25`	height: 25%;
`.h-50`	height: 50%;
`.h-75`	height: 75%;
`.h-100`	height: 100%;
`.h-auto`	height: auto;
`.vh-100`	height: 100vh;
`.mh-100`	max-height: 100%;
`.min-vh-100`	min-height: 100vh;

Basic usage

Fixed height

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

h-100

h-75

h-50

h-25

<div style="height:160px">
<div class="h-100 d-inline-block me-3 text-bg-primary p-1 px-2 rounded">h-100</div>
<div class="h-75 d-inline-block me-3 text-bg-primary p-1 px-2 rounded">h-75</div>
<div class="h-50 d-inline-block me-3 text-bg-primary p-1 px-2 rounded">h-50</div>
<div class="h-25 d-inline-block me-3 text-bg-primary p-1 px-2 rounded">h-25</div>
</div>

Auto height

Use h-auto to set an element to a auto height.

h-auto

<div class="h-auto d-inline-block me-3 text-bg-primary p-1 px-2 rounded">h-auto</div>

Full viewport 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.

max-height 100%

<div class="bg-purple-50" style="height:100px">
  <div class="bg-purple-300 text-white d-inline-block mh-100 p-2" style="height:200px">
    max-height 100%
  </div>
</div>