sass / css for width and height of bootstrap components

_bootstrap_width_height.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);


$i: 0;
@while $i < 100 {
	$val: auto;
	$k: $val;
	@if $i != 0 {
		$val: unquote(($i)+'%');
		$k: $i;
	}
	.w-#{$k}{
		width: $val;
	}
	.h-#{$k}{
		height: $val;
	}
	$i: $i + 5;
}

@each $key, $size in $grid-breakpoints {
	@media (min-width: $size) {
		$i: 0;
		@while $i <= 100 {
			$val: auto;
			$k: $val;
			@if $i != 0 {
				$val: unquote(($i)+'%');
				$k: $i;
			}

			.w-#{$key}-#{$k}{
				width: $val;
			}
			.h-#{$key}-#{$k}{
				height: $val;
			}
			$i: $i + 5;
		}
	}
}

output.css

.w-auto {
  width: auto; }

.h-auto {
  height: auto; }

.w-5 {
  width: 5%; }

.h-5 {
  height: 5%; }

.w-10 {
  width: 10%; }

.h-10 {
  height: 10%; }

.w-15 {
  width: 15%; }

.h-15 {
  height: 15%; }

.w-20 {
  width: 20%; }

.h-20 {
  height: 20%; }

.w-25 {
  width: 25%; }

.h-25 {
  height: 25%; }

.w-30 {
  width: 30%; }

.h-30 {
  height: 30%; }

.w-35 {
  width: 35%; }

.h-35 {
  height: 35%; }

.w-40 {
  width: 40%; }

.h-40 {
  height: 40%; }

.w-45 {
  width: 45%; }

.h-45 {
  height: 45%; }

.w-50 {
  width: 50%; }

.h-50 {
  height: 50%; }

.w-55 {
  width: 55%; }

.h-55 {
  height: 55%; }

.w-60 {
  width: 60%; }

.h-60 {
  height: 60%; }

.w-65 {
  width: 65%; }

.h-65 {
  height: 65%; }

.w-70 {
  width: 70%; }

.h-70 {
  height: 70%; }

.w-75 {
  width: 75%; }

.h-75 {
  height: 75%; }

.w-80 {
  width: 80%; }

.h-80 {
  height: 80%; }

.w-85 {
  width: 85%; }

.h-85 {
  height: 85%; }

.w-90 {
  width: 90%; }

.h-90 {
  height: 90%; }

.w-95 {
  width: 95%; }

.h-95 {
  height: 95%; }

@media (min-width: 0) {
  .w-xs-auto {
    width: auto; }
  .h-xs-auto {
    height: auto; }
  .w-xs-5 {
    width: 5%; }
  .h-xs-5 {
    height: 5%; }
  .w-xs-10 {
    width: 10%; }
  .h-xs-10 {
    height: 10%; }
  .w-xs-15 {
    width: 15%; }
  .h-xs-15 {
    height: 15%; }
  .w-xs-20 {
    width: 20%; }
  .h-xs-20 {
    height: 20%; }
  .w-xs-25 {
    width: 25%; }
  .h-xs-25 {
    height: 25%; }
  .w-xs-30 {
    width: 30%; }
  .h-xs-30 {
    height: 30%; }
  .w-xs-35 {
    width: 35%; }
  .h-xs-35 {
    height: 35%; }
  .w-xs-40 {
    width: 40%; }
  .h-xs-40 {
    height: 40%; }
  .w-xs-45 {
    width: 45%; }
  .h-xs-45 {
    height: 45%; }
  .w-xs-50 {
    width: 50%; }
  .h-xs-50 {
    height: 50%; }
  .w-xs-55 {
    width: 55%; }
  .h-xs-55 {
    height: 55%; }
  .w-xs-60 {
    width: 60%; }
  .h-xs-60 {
    height: 60%; }
  .w-xs-65 {
    width: 65%; }
  .h-xs-65 {
    height: 65%; }
  .w-xs-70 {
    width: 70%; }
  .h-xs-70 {
    height: 70%; }
  .w-xs-75 {
    width: 75%; }
  .h-xs-75 {
    height: 75%; }
  .w-xs-80 {
    width: 80%; }
  .h-xs-80 {
    height: 80%; }
  .w-xs-85 {
    width: 85%; }
  .h-xs-85 {
    height: 85%; }
  .w-xs-90 {
    width: 90%; }
  .h-xs-90 {
    height: 90%; }
  .w-xs-95 {
    width: 95%; }
  .h-xs-95 {
    height: 95%; }
  .w-xs-100 {
    width: 100%; }
  .h-xs-100 {
    height: 100%; } }

@media (min-width: 576px) {
  .w-sm-auto {
    width: auto; }
  .h-sm-auto {
    height: auto; }
  .w-sm-5 {
    width: 5%; }
  .h-sm-5 {
    height: 5%; }
  .w-sm-10 {
    width: 10%; }
  .h-sm-10 {
    height: 10%; }
  .w-sm-15 {
    width: 15%; }
  .h-sm-15 {
    height: 15%; }
  .w-sm-20 {
    width: 20%; }
  .h-sm-20 {
    height: 20%; }
  .w-sm-25 {
    width: 25%; }
  .h-sm-25 {
    height: 25%; }
  .w-sm-30 {
    width: 30%; }
  .h-sm-30 {
    height: 30%; }
  .w-sm-35 {
    width: 35%; }
  .h-sm-35 {
    height: 35%; }
  .w-sm-40 {
    width: 40%; }
  .h-sm-40 {
    height: 40%; }
  .w-sm-45 {
    width: 45%; }
  .h-sm-45 {
    height: 45%; }
  .w-sm-50 {
    width: 50%; }
  .h-sm-50 {
    height: 50%; }
  .w-sm-55 {
    width: 55%; }
  .h-sm-55 {
    height: 55%; }
  .w-sm-60 {
    width: 60%; }
  .h-sm-60 {
    height: 60%; }
  .w-sm-65 {
    width: 65%; }
  .h-sm-65 {
    height: 65%; }
  .w-sm-70 {
    width: 70%; }
  .h-sm-70 {
    height: 70%; }
  .w-sm-75 {
    width: 75%; }
  .h-sm-75 {
    height: 75%; }
  .w-sm-80 {
    width: 80%; }
  .h-sm-80 {
    height: 80%; }
  .w-sm-85 {
    width: 85%; }
  .h-sm-85 {
    height: 85%; }
  .w-sm-90 {
    width: 90%; }
  .h-sm-90 {
    height: 90%; }
  .w-sm-95 {
    width: 95%; }
  .h-sm-95 {
    height: 95%; }
  .w-sm-100 {
    width: 100%; }
  .h-sm-100 {
    height: 100%; } }

@media (min-width: 768px) {
  .w-md-auto {
    width: auto; }
  .h-md-auto {
    height: auto; }
  .w-md-5 {
    width: 5%; }
  .h-md-5 {
    height: 5%; }
  .w-md-10 {
    width: 10%; }
  .h-md-10 {
    height: 10%; }
  .w-md-15 {
    width: 15%; }
  .h-md-15 {
    height: 15%; }
  .w-md-20 {
    width: 20%; }
  .h-md-20 {
    height: 20%; }
  .w-md-25 {
    width: 25%; }
  .h-md-25 {
    height: 25%; }
  .w-md-30 {
    width: 30%; }
  .h-md-30 {
    height: 30%; }
  .w-md-35 {
    width: 35%; }
  .h-md-35 {
    height: 35%; }
  .w-md-40 {
    width: 40%; }
  .h-md-40 {
    height: 40%; }
  .w-md-45 {
    width: 45%; }
  .h-md-45 {
    height: 45%; }
  .w-md-50 {
    width: 50%; }
  .h-md-50 {
    height: 50%; }
  .w-md-55 {
    width: 55%; }
  .h-md-55 {
    height: 55%; }
  .w-md-60 {
    width: 60%; }
  .h-md-60 {
    height: 60%; }
  .w-md-65 {
    width: 65%; }
  .h-md-65 {
    height: 65%; }
  .w-md-70 {
    width: 70%; }
  .h-md-70 {
    height: 70%; }
  .w-md-75 {
    width: 75%; }
  .h-md-75 {
    height: 75%; }
  .w-md-80 {
    width: 80%; }
  .h-md-80 {
    height: 80%; }
  .w-md-85 {
    width: 85%; }
  .h-md-85 {
    height: 85%; }
  .w-md-90 {
    width: 90%; }
  .h-md-90 {
    height: 90%; }
  .w-md-95 {
    width: 95%; }
  .h-md-95 {
    height: 95%; }
  .w-md-100 {
    width: 100%; }
  .h-md-100 {
    height: 100%; } }

@media (min-width: 992px) {
  .w-lg-auto {
    width: auto; }
  .h-lg-auto {
    height: auto; }
  .w-lg-5 {
    width: 5%; }
  .h-lg-5 {
    height: 5%; }
  .w-lg-10 {
    width: 10%; }
  .h-lg-10 {
    height: 10%; }
  .w-lg-15 {
    width: 15%; }
  .h-lg-15 {
    height: 15%; }
  .w-lg-20 {
    width: 20%; }
  .h-lg-20 {
    height: 20%; }
  .w-lg-25 {
    width: 25%; }
  .h-lg-25 {
    height: 25%; }
  .w-lg-30 {
    width: 30%; }
  .h-lg-30 {
    height: 30%; }
  .w-lg-35 {
    width: 35%; }
  .h-lg-35 {
    height: 35%; }
  .w-lg-40 {
    width: 40%; }
  .h-lg-40 {
    height: 40%; }
  .w-lg-45 {
    width: 45%; }
  .h-lg-45 {
    height: 45%; }
  .w-lg-50 {
    width: 50%; }
  .h-lg-50 {
    height: 50%; }
  .w-lg-55 {
    width: 55%; }
  .h-lg-55 {
    height: 55%; }
  .w-lg-60 {
    width: 60%; }
  .h-lg-60 {
    height: 60%; }
  .w-lg-65 {
    width: 65%; }
  .h-lg-65 {
    height: 65%; }
  .w-lg-70 {
    width: 70%; }
  .h-lg-70 {
    height: 70%; }
  .w-lg-75 {
    width: 75%; }
  .h-lg-75 {
    height: 75%; }
  .w-lg-80 {
    width: 80%; }
  .h-lg-80 {
    height: 80%; }
  .w-lg-85 {
    width: 85%; }
  .h-lg-85 {
    height: 85%; }
  .w-lg-90 {
    width: 90%; }
  .h-lg-90 {
    height: 90%; }
  .w-lg-95 {
    width: 95%; }
  .h-lg-95 {
    height: 95%; }
  .w-lg-100 {
    width: 100%; }
  .h-lg-100 {
    height: 100%; } }

@media (min-width: 1200px) {
  .w-xl-auto {
    width: auto; }
  .h-xl-auto {
    height: auto; }
  .w-xl-5 {
    width: 5%; }
  .h-xl-5 {
    height: 5%; }
  .w-xl-10 {
    width: 10%; }
  .h-xl-10 {
    height: 10%; }
  .w-xl-15 {
    width: 15%; }
  .h-xl-15 {
    height: 15%; }
  .w-xl-20 {
    width: 20%; }
  .h-xl-20 {
    height: 20%; }
  .w-xl-25 {
    width: 25%; }
  .h-xl-25 {
    height: 25%; }
  .w-xl-30 {
    width: 30%; }
  .h-xl-30 {
    height: 30%; }
  .w-xl-35 {
    width: 35%; }
  .h-xl-35 {
    height: 35%; }
  .w-xl-40 {
    width: 40%; }
  .h-xl-40 {
    height: 40%; }
  .w-xl-45 {
    width: 45%; }
  .h-xl-45 {
    height: 45%; }
  .w-xl-50 {
    width: 50%; }
  .h-xl-50 {
    height: 50%; }
  .w-xl-55 {
    width: 55%; }
  .h-xl-55 {
    height: 55%; }
  .w-xl-60 {
    width: 60%; }
  .h-xl-60 {
    height: 60%; }
  .w-xl-65 {
    width: 65%; }
  .h-xl-65 {
    height: 65%; }
  .w-xl-70 {
    width: 70%; }
  .h-xl-70 {
    height: 70%; }
  .w-xl-75 {
    width: 75%; }
  .h-xl-75 {
    height: 75%; }
  .w-xl-80 {
    width: 80%; }
  .h-xl-80 {
    height: 80%; }
  .w-xl-85 {
    width: 85%; }
  .h-xl-85 {
    height: 85%; }
  .w-xl-90 {
    width: 90%; }
  .h-xl-90 {
    height: 90%; }
  .w-xl-95 {
    width: 95%; }
  .h-xl-95 {
    height: 95%; }
  .w-xl-100 {
    width: 100%; }
  .h-xl-100 {
    height: 100%; } }