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

Ex:

<section id="slider" class="slider-element min-vh-60 min-vh-md-100">
This code sets a Minimum Height of 60% (Viewport height) on all Devices but 100% (Viewport height) on Devices Widths from 768px

Note: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

Ex:

<section id="slider" class="slider-element max-vh-60 max-vh-md-100">
This code sets a Maximum Height of 60% (Viewport height) on all Devices but 100% (Viewport height) on Devices Widths from 768px

Note: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

Ex:

<section id="slider" class="slider-element vh-60 vh-md-100">
This code sets a Fixed Height of 60% (Viewport height) on all Devices but 100% (Viewport height) on Devices Widths from 768px

Note: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

Ex:

<section id="slider" class="slider-element h-60 h-md-100">
This code sets a Fixed Height of 60% (Parent Height) on all Devices but 100% (Parent height) on Devices Widths from 768px

Note: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/4.5/utilities/sizing/ .

Last Modified: July 9, 2020