width&height.css

.h-10 {
  height: 10% !important;
}

.w-10 {
  width: 10% !important;
}

.h-20 {
  height: 20% !important;
}

.w-20 {
  width: 20% !important;
}

.h-30 {
  height: 30% !important;
}

.w-30 {
  width: 30% !important;
}

.h-40 {
  height: 40% !important;
}

.w-40 {
  width: 40% !important;
}

.h-50 {
  height: 50% !important;
}

.w-50 {
  width: 50% !important;
}

.h-60 {
  height: 60% !important;
}

.w-60 {
  width: 60% !important;
}

.h-70 {
  height: 70% !important;
}

.w-70 {
  width: 70% !important;
}

.h-80 {
  height: 80% !important;
}

.w-80 {
  width: 80% !important;
}

.h-90 {
  height: 90% !important;
}

.w-90 {
  width: 90% !important;
}

.h-100 {
  height: 100% !important;
}

.w-100 {
  width: 100% !important;
}

@media screen and (min-width: 576px) {
  .h-sm-10 {
    height: 10% !important;
}

  .w-sm-10 {
    width: 10% !important;
}

  .h-sm-20 {
    height: 20% !important;
}

  .w-sm-20 {
    width: 20% !important;
}

  .h-sm-30 {
    height: 30% !important;
}

  .w-sm-30 {
    width: 30% !important;
}

  .h-sm-40 {
    height: 40% !important;
}

  .w-sm-40 {
    width: 40% !important;
}

  .h-sm-50 {
    height: 50% !important;
}

  .w-sm-50 {
    width: 50% !important;
}

  .h-sm-60 {
    height: 60% !important;
}

  .w-sm-60 {
    width: 60% !important;
}

  .h-sm-70 {
    height: 70% !important;
}

  .w-sm-70 {
    width: 70% !important;
}

  .h-sm-80 {
    height: 80% !important;
}

  .w-sm-80 {
    width: 80% !important;
}

  .h-sm-90 {
    height: 90% !important;
}

  .w-sm-90 {
    width: 90% !important;
}

  .h-sm-100 {
    height: 100% !important;
}

  .w-sm-100 {
    width: 100% !important;
} 
}

@media screen and (min-width: 768px) {
  .h-md-10 {
    height: 10% !important;
}

  .w-md-10 {
    width: 10% !important;
}

  .h-md-20 {
    height: 20% !important;
}

  .w-md-20 {
    width: 20% !important;
}

  .h-md-30 {
    height: 30% !important;
}

  .w-md-30 {
    width: 30% !important;
}

  .h-md-40 {
    height: 40% !important;
}

  .w-md-40 {
    width: 40% !important;
}

  .h-md-50 {
    height: 50% !important;
}

  .w-md-50 {
    width: 50% !important;
}

  .h-md-60 {
    height: 60% !important;
}

  .w-md-60 {
    width: 60% !important;
}

  .h-md-70 {
    height: 70% !important;
}

  .w-md-70 {
    width: 70% !important;
}

  .h-md-80 {
    height: 80% !important;
}

  .w-md-80 {
    width: 80% !important;
}

  .h-md-90 {
    height: 90% !important;
}

  .w-md-90 {
    width: 90% !important;
}

  .h-md-100 {
    height: 100% !important;
}

  .w-md-100 {
    width: 100% !important;
}
}

@media screen and (min-width: 992px) {
  .h-lg-10 {
    height: 10% !important;
}

  .w-lg-10 {
    width: 10% !important;
}

  .h-lg-20 {
    height: 20% !important;
}

  .w-lg-20 {
    width: 20% !important;
}

  .h-lg-30 {
    height: 30% !important;
}

  .w-lg-30 {
    width: 30% !important;
}

  .h-lg-40 {
    height: 40% !important;
}

  .w-lg-40 {
    width: 40% !important;
}

  .h-lg-50 {
    height: 50% !important;
}

  .w-lg-50 {
    width: 50% !important;
}

  .h-lg-60 {
    height: 60% !important;
}

  .w-lg-60 {
    width: 60% !important;
}

  .h-lg-70 {
    height: 70% !important;
}

  .w-lg-70 {
    width: 70% !important;
}

  .h-lg-80 {
    height: 80% !important;
}

  .w-lg-80 {
    width: 80% !important;
}

  .h-lg-90 {
    height: 90% !important;
}

  .w-lg-90 {
    width: 90% !important;
}

  .h-lg-100 {
    height: 100% !important;
}

  .w-lg-100 {
    width: 100% !important;
}
}

@media screen and (min-width: 1200px) {
  .h-xl-10 {
    height: 10% !important;
}

  .w-xl-10 {
    width: 10% !important;
}

  .h-xl-20 {
    height: 20% !important;
}

  .w-xl-20 {
    width: 20% !important;
}

  .h-xl-30 {
    height: 30% !important;
}

  .w-xl-30 {
    width: 30% !important;
}

  .h-xl-40 {
    height: 40% !important;
}

  .w-xl-40 {
    width: 40% !important;
}

  .h-xl-50 {
    height: 50% !important;
}

  .w-xl-50 {
    width: 50% !important;
}

  .h-xl-60 {
    height: 60% !important;
}

  .w-xl-60 {
    width: 60% !important;
}

  .h-xl-70 {
    height: 70% !important;
}

  .w-xl-70 {
    width: 70% !important;
}

  .h-xl-80 {
    height: 80% !important;
}

  .w-xl-80 {
    width: 80% !important;
}

  .h-xl-90 {
    height: 90% !important;
}

  .w-xl-90 {
    width: 90% !important;
}

  .h-xl-100 {
    height: 100% !important;
}

  .w-xl-100 {
    width: 100% !important;
} 
}