Useful when you need to create elements with fixed heights.
.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 }
}