Heights

List of Height Utility Classes included with Canvas.

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/ .