Height Utilities

Useful when you need to create elements with fixed heights.


.h-50
.h-60
.h-70
.h-80
.h-90
.h-100
.h-50 { height: 50px }
.h-60 { height: 60px }
.h-70 { height: 70px }
.h-80 { height: 80px }
.h-90 { height: 90px }
.h-100 { height: 100px }

@media screen and (min-width:  576px) {
  .sm:h-50 { height: 50px }
  .sm:h-60 { height: 60px }
  .sm:h-70 { height: 70px }
  .sm:h-80 { height: 80px }
  .sm:h-90 { height: 90px }
  .sm:h-100 { height: 100px }
}

@media screen and (min-width:  768px) {
  .md:h-50 { height: 50px }
  .md:h-60 { height: 60px }
  .md:h-70 { height: 70px }
  .md:h-80 { height: 80px }
  .md:h-90 { height: 90px }
  .md:h-100 { height: 100px }
}

@media screen and (min-width:  992px) {
  .lg:h-50 { height: 50px }
  .lg:h-60 { height: 60px }
  .lg:h-70 { height: 70px }
  .lg:h-80 { height: 80px }
  .lg:h-90 { height: 90px }
  .lg:h-100 { height: 100px }
}

@media screen and (min-width:  1200px) {
  .xl:h-50 { height: 50px }
  .xl:h-60 { height: 60px }
  .xl:h-70 { height: 70px }
  .xl:h-80 { height: 80px }
  .xl:h-90 { height: 90px }
  .xl:h-100 { height: 100px }
}