Heights

Canvas provides fractional heights, viewport heights, and responsive height utilities on top of Bootstrap.

Note: the .h-* prefix is also used by Canvas hover utilities (for example .h-bg-primary, .h-scale, .h-shadow). Those apply on hover and are covered on the relevant pages. This page covers actual sizing.

Fractional and auto heights

Class	Height
`.h-0`	0
`.h-25`	25%
`.h-40`	40%
`.h-50`	50%
`.h-60`	60%
`.h-75`	75%
`.h-90`	90%
`.h-100`	100%
`.h-auto`	auto

These are also responsive: .h-sm-*, .h-md-*, .h-lg-*, .h-xl-*, .h-xxl-* (each with the 0/25/40/50/60/75/90/100/auto steps).

Viewport heights

Canvas ships min and max viewport height utilities using the same scale:

Class	Effect
`.min-vh-0` to `.min-vh-100`	min-height in vh (steps 0/25/40/50/60/75/90/100)
`.max-vh-0` to `.max-vh-100`	max-height in vh (same steps)
`.max-vh-none`	remove max-height

Both are responsive: .min-vh-md-75, .max-vh-lg-50, .max-vh-sm-none, and so on across all breakpoints.

Usage

Full viewport hero section:

<section class="min-vh-100 d-flex align-items-center">
  <div class="container">
    <h1>Full height hero</h1>
  </div>
</section>

Cap a scrolling panel to half the viewport on large screens:

<div class="max-vh-50 max-vh-lg-75 overflow-auto">
  Long content that scrolls inside a bounded height.
</div>

Fill the parent height:

<div class="h-100">Fills 100% of parent height</div>

Classes

Class	Description
`.min-vh-*`	Sets a Minimum Height relative to the Viewport Sizes `.min-vh-100` - Sets a minimum height of 100% relative to the Viewport `.min-vh-75` - Sets a minimum height of 75% relative to the Viewport `.min-vh-60` - Sets a minimum height of 60% relative to the Viewport `.min-vh-50` - Sets a minimum height of 50% relative to the Viewport `.min-vh-40` - Sets a minimum height of 40% relative to the Viewport `.min-vh-25` - Sets a minimum height of 25% relative to the Viewport `.min-vh-0` - Sets a minimum height of 0% relative to the Viewport Responsive Breakpoints `.min-vh-{height}` - Sets a minimum height relative to the Viewport on all Devices `.min-vh-sm-{height}` - Sets a minimum height relative to the Viewport on Device Widths from 576px `.min-vh-md-{height}` - Sets a minimum height relative to the Viewport on Device Widths from 768px `.min-vh-lg-{height}` - Sets a minimum height relative to the Viewport on Device Widths from 992px `.min-vh-xl-{height}` - Sets a minimum height relative to the Viewport on Device Widths from 1200px Example: [ch_pre class="mb-3"] [/ch_pre] This code sets a Minimum Height of 60% (Viewport height) on all Devices but 100% (Viewport height) on Devices Widths from 768px You can add Multiple Height Utility Classes on the same element for different responsive breakpoints
`.max-vh-*`	Sets a Maximum Height relative to the Viewport Sizes `.max-vh-100` - Sets a maximum height of 100% relative to the Viewport `.max-vh-75` - Sets a maximum height of 75% relative to the Viewport `.max-vh-60` - Sets a maximum height of 60% relative to the Viewport `.max-vh-50` - Sets a maximum height of 50% relative to the Viewport `.max-vh-40` - Sets a maximum height of 40% relative to the Viewport `.max-vh-25` - Sets a maximum height of 25% relative to the Viewport `.max-vh-none` - Sets no maximum height Responsive Breakpoints `.max-vh-{height}` - Sets a maximum height relative to the Viewport on all Devices `.max-vh-sm-{height}` - Sets a maximum height relative to the Viewport on Device Widths from 576px `.max-vh-md-{height}` - Sets a maximum height relative to the Viewport on Device Widths from 768px `.max-vh-lg-{height}` - Sets a maximum height relative to the Viewport on Device Widths from 992px `.max-vh-xl-{height}` - Sets a maximum height relative to the Viewport on Device Widths from 1200px Example: [ch_pre class="mb-3"] [/ch_pre] This code sets a Maximum Height of 60% (Viewport height) on all Devices but 100% (Viewport height) on Devices Widths from 768px You can add Multiple Height Utility Classes on the same element for different responsive breakpoints
`.vh-*`	Sets a Fixed Height relative to the Viewport Sizes `.vh-100` - Sets 100% of the Viewport Height `.vh-75` - Sets 75% of the Viewport Height `.vh-60` - Sets 60% of the Viewport Height `.vh-50` - Sets 50% of the Viewport Height `.vh-40` - Sets 40% of the Viewport Height `.vh-25` - Sets 25% of the Viewport Height `.vh-0` - Sets 0% of the Viewport Height Responsive Breakpoints `.vh-{size}` - Sets a Fixed Height based on the Viewport Height on all Devices `.vh-sm-{size}` - Sets a Fixed Height based on the Viewport Height on Device Widths from 576px `.vh-md-{size}` - Sets a Fixed Height based on the Viewport Height on Device Widths from 768px `.vh-lg-{size}` - Sets a Fixed Height based on the Viewport Height on Device Widths from 992px `.vh-xl-{size}` - Sets a Fixed Height based on the Viewport Height on Device Widths from 1200px Example: [ch_pre class="mb-3"] [/ch_pre] This code sets a Fixed Height of 60% (Viewport height) on all Devices but 100% (Viewport height) on Devices Widths from 768px You can add Multiple Height Utility Classes on the same element for different responsive breakpoints
`.h-*`	Sets a Fixed Height relative to the Parent Height Sizes `.h-100` - Sets 100% of the Parent Height `.h-75` - Sets 75% of the Parent Height `.h-60` - Sets 60% of the Parent Height `.h-50` - Sets 50% of the Parent Height `.h-40` - Sets 40% of the Parent Height `.h-25` - Sets 25% of the Parent Height `.h-0` - Sets 0% of the Parent Height Responsive Breakpoints `.h-{size}` - Sets a Fixed Height relative to the Parent Height on all Devices `.h-sm-{size}` - Sets a Fixed Height relative to the Parent Height on Device Widths from 576px `.h-md-{size}` - Sets a Fixed Height relative to the Parent Height on Device Widths from 768px `.h-lg-{size}` - Sets a Fixed Height relative to the Parent Height on Device Widths from 992px `.h-xl-{size}` - Sets a Fixed Height relative to the Parent Height on Device Widths from 1200px Example: [ch_pre class="mb-3"] [/ch_pre] This code sets a Fixed Height of 60% (Parent Height) on all Devices but 100% (Parent height) on Devices Widths from 768px You can add Multiple Height Utility Classes on the same element for different responsive breakpoints
`More Sizing Classes`	More Sizing Utility Classes can be found here: https://getbootstrap.com/docs/5.3/utilities/sizing/ .

Was this page helpful?