Skip to content

Instantly share code, notes, and snippets.

@andrei-coelho
Last active February 7, 2023 13:24
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrei-coelho/9d0ed805de1bae289a8fb63a1cb4a2ae to your computer and use it in GitHub Desktop.
Save andrei-coelho/9d0ed805de1bae289a8fb63a1cb4a2ae to your computer and use it in GitHub Desktop.
sass / css for width and height of bootstrap components
$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;
}
}
}
.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%; } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment