Height

Utilities to control an element's height.

Percentages

Use d-h{n}p to set a percentage height for an element.

<div class="d-h216">
  <div class="d-h10p">d-h10p</div>
  <div class="d-h20p">d-h20p</div>
  <div class="d-h25p">d-h25p</div>
  <div class="d-h30p">d-h30p</div>
  <div class="d-h40p">d-h40p</div>
  <div class="d-h50p">d-h50p</div>
  <div class="d-h60p">d-h60p</div>
  <div class="d-h70p">d-h70p</div>
  <div class="d-h75p">d-h75p</div>
  <div class="d-h80p">d-h80p</div>
  <div class="d-h90p">d-h80p</div>
  <div class="d-h100p">d-h100p</div>
</div>

Fixed

Use d-h{n} to set a fixed height for an element.

<div class="d-hmn264">
  <div class="d-h0">...</div>
  <div class="d-h1">...</div>
  <div class="d-h2">...</div>
  <div class="d-h4">...</div>
  <div class="d-h6">...</div>
  <div class="d-h8">...</div>
  <div class="d-h12">...</div>
  <div class="d-h16">...</div>
  <div class="d-h20">...</div>
  <div class="d-h24">...</div>
  <div class="d-h32">...</div>
  <div class="d-h42">...</div>
  <div class="d-h48">...</div>
  <div class="d-h64">...</div>
  <div class="d-h72">...</div>
  <div class="d-h84">...</div>
  <div class="d-h96">...</div>
  <div class="d-h102">...</div>
  <div class="d-h114">...</div>
  <div class="d-h128">...</div>
  <div class="d-h164">...</div>
  <div class="d-h216">...</div>
  <div class="d-h264">...</div>
  <div class="d-h332">...</div>
  <div class="d-h464">...</div>
  <div class="d-h512">...</div>
  <div class="d-h628">...</div>
  <div class="d-h764">...</div>
  <div class="d-h828">...</div>
  <div class="d-h912">...</div>
  <div class="d-h1024">...</div>
  <div class="d-h1140">...</div>
  <div class="d-h1268">...</div>
  <div class="d-h1340">...</div>
</div>

Screen

Use d-h100vh to have an element cover the user's viewport.

<div class="d-h100vh d-w100vw">...</div>

Auto

Use d-h-auto have the browser calculate and select a height.

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

Classes

Class
Output
.d-h10p height: 10% !important;
.d-h20p height: 20% !important;
.d-h25p height: 25% !important;
.d-h30p height: 30% !important;
.d-h40p height: 40% !important;
.d-h50p height: 50% !important;
.d-h60p height: 60% !important;
.d-h70p height: 70% !important;
.d-h75p height: 75% !important;
.d-h80p height: 80% !important;
.d-h90p height: 90% !important;
.d-h100p height: 100% !important;
.d-h0 height: 0px !important;
.d-h1 height: 1px !important;
.d-h2 height: 2px !important;
.d-h4 height: 4px !important;
.d-h6 height: 6px !important;
.d-h8 height: 8px !important;
.d-h12 height: 12px !important;
.d-h16 height: 16px !important;
.d-h20 height: 20px !important;
.d-h24 height: 24px !important;
.d-h32 height: 32px !important;
.d-h42 height: 42px !important;
.d-h48 height: 48px !important;
.d-h64 height: 64px !important;
.d-h72 height: 72px !important;
.d-h84 height: 84px !important;
.d-h96 height: 96px !important;
.d-h102 height: 102px !important;
.d-h114 height: 114px !important;
.d-h128 height: 128px !important;
.d-h164 height: 164px !important;
.d-h216 height: 216px !important;
.d-h264 height: 264px !important;
.d-h332 height: 332px !important;
.d-h384 height: 384px !important;
.d-h464 height: 464px !important;
.d-h512 height: 512px !important;
.d-h628 height: 628px !important;
.d-h764 height: 764px !important;
.d-h828 height: 828px !important;
.d-h912 height: 912px !important;
.d-h1024 height: 1024px !important;
.d-h1140 height: 1140px !important;
.d-h1268 height: 1268px !important;
.d-h1340 height: 1340px !important;
.d-h100vh height: 100vh !important;
.d-h-auto height: auto !important;
.d-h-unset height: unset !important;
.d-h-fit-content height: fit-content !important;
.d-h-max-content height: max-content !important;
.d-h-min-content height: min-content !important;
Height documentation last updated Thursday, June 11, 2026