Height

Class	Styles
.h-25	height: 25%;
.h-50	height: 50%;
.h-75	height: 75%;
.h-100	height: 100%;
.h-auto	height: auto;
.h-min	height: min-content;
.h-max	height: max-content;
.h-fit	height: -moz-fit-content; height: fit-content;
.max-h-100	max-height: 100%;
.min-h-0	min-height: 0;
.min-h-100	min-height: 100%;
.vh-100	height: 100vh;
.min-vh-100	min-height: 100vh;

Use height utilities to set the height of elements. Height utilities are generated from the utility API and include support for percentage values, intrinsic sizing keywords, and viewport units.

Relative height

Set height relative to the parent element using percentage-based utilities. Includes support for 25%, 50%, 75%, 100%, and auto by default.

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

HTML

<div style="height: 100px;">
  <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
</div>

Intrinsic sizing

Use intrinsic sizing keywords to set height based on content.

Height min-content

Height max-content

Height fit-content

HTML

<div style="height: 200px;">
  <div class="h-min d-inline-block p-3" style="width: 120px;">Height min-content</div>
  <div class="h-max d-inline-block p-3" style="width: 120px;">Height max-content</div>
  <div class="h-fit d-inline-block p-3" style="width: 120px;">Height fit-content</div>
</div>

Max height

Set maximum height using max-height utilities.

Max-height 100%

HTML

<div style="height: 100px;">
  <div class="max-h-100" style="width: 100px; height: 200px;">Max-height 100%</div>
</div>

Min height

Set minimum height using min-height utilities.

Min-height 0 (allows content to determine height)

Min-height 100%

HTML

<div class="min-h-0 p-3" style="width: 200px;">
  Min-height 0 (allows content to determine height)
</div>
<div class="min-h-100 p-3" style="width: 200px;">Min-height 100%</div>

Viewport height

Set height relative to the viewport using viewport units.

HTML

<div class="vh-100">Height 100vh</div>
<div class="min-vh-100">Min-height 100vh</div>

Full viewport height sections! Using vh-100 makes an element take up the entire viewport height, which is useful for hero sections and full-screen layouts.

CSS

Sass utilities API

Height utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

SCSS

"height": (
  property: height,
  class: h,
  values: (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto,
    min: min-content,
    max: max-content,
    fit: fit-content,
  )
),
"max-height": (
  property: max-height,
  class: max-h,
  values: (100: 100%)
),
"min-height": (
  property: min-height,
  class: min-h,
  values: (
    0: 0,
    100: 100%,
  ),
),
"viewport-height": (
  property: height,
  class: vh,
  values: (100: 100vh)
),
"min-viewport-height": (
  property: min-height,
  class: min-vh,
  values: (100: 100vh)
),