Height

Utilities to control an element's height.

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-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-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;

Percentages

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

Fixed

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

Screen

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

Auto

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