Skip to content

Instantly share code, notes, and snippets.

@uzielweb

uzielweb/custom-bootstrap-ratios.css

Last active July 22, 2023 23:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save uzielweb/974a7ddc678fd124bce8b7c69ebb886e to your computer and use it in GitHub Desktop.
Save uzielweb/974a7ddc678fd124bce8b7c69ebb886e to your computer and use it in GitHub Desktop.
Download ZIP
Custom Bootstrap Ratios
Raw
custom-bootstrap-ratios.css
/* Custom Ratios for Bootstrap 5 */
.ratio-1x1 {
--bs-aspect-ratio: 100%;
}
.ratio-1x2 {
--bs-aspect-ratio: 200%;
}
.ratio-2x1 {
--bs-aspect-ratio: 50%;
}
.ratio-1x3 {
--bs-aspect-ratio: 300%;
}
.ratio-3x1 {
--bs-aspect-ratio: 33.3333333333%;
}
.ratio-1x4 {
--bs-aspect-ratio: 400%;
}
.ratio-4x1 {
--bs-aspect-ratio: 25%;
}
.ratio-1x5 {
--bs-aspect-ratio: 500%;
}
.ratio-5x1 {
--bs-aspect-ratio: 20%;
}
.ratio-3x2 {
--bs-aspect-ratio: 66.6666666667%;
}
.ratio-2x3 {
--bs-aspect-ratio: 150%;
}
.ratio-3x4 {
--bs-aspect-ratio: 133.3333333333%;
}
.ratio-4x3 {
--bs-aspect-ratio: 75%;
}
.ratio-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio-9x16 {
--bs-aspect-ratio: 177.7777777778%;
}
.ratio-21x9 {
--bs-aspect-ratio: 42.8571428571%;
}
.ratio-9x21 {
--bs-aspect-ratio: 233.3333333333%;
}
.ratio-9x32 {
--bs-aspect-ratio: 355.5555555556%;
}
.ratio-32x9 {
--bs-aspect-ratio: 28.125%;
}
/* X-Small */
@media (max-width: 575px) {
.ratio-xs-1x1 {
--bs-aspect-ratio: 100%;
}
.ratio-xs-1x2 {
--bs-aspect-ratio: 200%;
}
.ratio-xs-2x1 {
--bs-aspect-ratio: 50%;
}
.ratio-xs-1x3 {
--bs-aspect-ratio: 300%;
}
.ratio-xs-3x1 {
--bs-aspect-ratio: 33.3333333333%;
}
.ratio-xs-1x4 {
--bs-aspect-ratio: 400%;
}
.ratio-xs-4x1 {
--bs-aspect-ratio: 25%;
}
.ratio-xs-1x5 {
--bs-aspect-ratio: 500%;
}
.ratio-xs-5x1 {
--bs-aspect-ratio: 20%;
}
.ratio-xs-3x2 {
--bs-aspect-ratio: 66.6666666667%;
}
.ratio-xs-2x3 {
--bs-aspect-ratio: 150%;
}
.ratio-xs-3x4 {
--bs-aspect-ratio: 133.3333333333%;
}
.ratio-xs-4x3 {
--bs-aspect-ratio: 75%;
}
.ratio-xs-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio-xs-9x16 {
--bs-aspect-ratio: 177.7777777778%;
}
.ratio-xs-21x9 {
--bs-aspect-ratio: 42.8571428571%;
}
.ratio-xs-9x21 {
--bs-aspect-ratio: 233.3333333333%;
}
.ratio-xs-9x32 {
--bs-aspect-ratio: 355.5555555556%;
}
.ratio-xs-32x9 {
--bs-aspect-ratio: 28.125%;
}
}
/* Small */
@media (min-width: 576px) {
.ratio-sm-1x1 {
--bs-aspect-ratio: 100%;
}
.ratio-sm-1x2 {
--bs-aspect-ratio: 200%;
}
.ratio-sm-2x1 {
--bs-aspect-ratio: 50%;
}
.ratio-sm-1x3 {
--bs-aspect-ratio: 300%;
}
.ratio-sm-3x1 {
--bs-aspect-ratio: 33.3333333333%;
}
.ratio-sm-1x4 {
--bs-aspect-ratio: 400%;
}
.ratio-sm-4x1 {
--bs-aspect-ratio: 25%;
}
.ratio-sm-1x5 {
--bs-aspect-ratio: 500%;
}
.ratio-sm-5x1 {
--bs-aspect-ratio: 20%;
}
.ratio-sm-3x2 {
--bs-aspect-ratio: 66.6666666667%;
}
.ratio-sm-2x3 {
--bs-aspect-ratio: 150%;
}
.ratio-sm-3x4 {
--bs-aspect-ratio: 133.3333333333%;
}
.ratio-sm-4x3 {
--bs-aspect-ratio: 75%;
}
.ratio-sm-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio-sm-9x16 {
--bs-aspect-ratio: 177.7777777778%;
}
.ratio-sm-21x9 {
--bs-aspect-ratio: 42.8571428571%;
}
.ratio-sm-9x21 {
--bs-aspect-ratio: 233.3333333333%;
}
.ratio-sm-9x32 {
--bs-aspect-ratio: 355.5555555556%;
}
.ratio-sm-32x9 {
--bs-aspect-ratio: 28.125%;
}
}
/* Medium */
@media (min-width: 768px) {
.ratio-md-1x1 {
--bs-aspect-ratio: 100%;
}
.ratio-md-1x2 {
--bs-aspect-ratio: 200%;
}
.ratio-md-2x1 {
--bs-aspect-ratio: 50%;
}
.ratio-md-1x3 {
--bs-aspect-ratio: 300%;
}
.ratio-md-3x1 {
--bs-aspect-ratio: 33.3333333333%;
}
.ratio-md-1x4 {
--bs-aspect-ratio: 400%;
}
.ratio-md-4x1 {
--bs-aspect-ratio: 25%;
}
.ratio-md-1x5 {
--bs-aspect-ratio: 500%;
}
.ratio-md-5x1 {
--bs-aspect-ratio: 20%;
}
.ratio-md-3x2 {
--bs-aspect-ratio: 66.6666666667%;
}
.ratio-md-2x3 {
--bs-aspect-ratio: 150%;
}
.ratio-md-3x4 {
--bs-aspect-ratio: 133.3333333333%;
}
.ratio-md-4x3 {
--bs-aspect-ratio: 75%;
}
.ratio-md-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio-md-9x16 {
--bs-aspect-ratio: 177.7777777778%;
}
.ratio-md-21x9 {
--bs-aspect-ratio: 42.8571428571%;
}
.ratio-md-9x21 {
--bs-aspect-ratio: 233.3333333333%;
}
.ratio-md-9x32 {
--bs-aspect-ratio: 355.5555555556%;
}
.ratio-md-32x9 {
--bs-aspect-ratio: 28.125%;
}
}
/* Large */
@media (min-width: 992px) {
.ratio-lg-1x1 {
--bs-aspect-ratio: 100%;
}
.ratio-lg-1x2 {
--bs-aspect-ratio: 200%;
}
.ratio-lg-2x1 {
--bs-aspect-ratio: 50%;
}
.ratio-lg-1x3 {
--bs-aspect-ratio: 300%;
}
.ratio-lg-3x1 {
--bs-aspect-ratio: 33.3333333333%;
}
.ratio-lg-1x4 {
--bs-aspect-ratio: 400%;
}
.ratio-lg-4x1 {
--bs-aspect-ratio: 25%;
}
.ratio-lg-1x5 {
--bs-aspect-ratio: 500%;
}
.ratio-lg-5x1 {
--bs-aspect-ratio: 20%;
}
.ratio-lg-3x2 {
--bs-aspect-ratio: 66.6666666667%;
}
.ratio-lg-2x3 {
--bs-aspect-ratio: 150%;
}
.ratio-lg-3x4 {
--bs-aspect-ratio: 133.3333333333%;
}
.ratio-lg-4x3 {
--bs-aspect-ratio: 75%;
}
.ratio-lg-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio-lg-9x16 {
--bs-aspect-ratio: 177.7777777778%;
}
.ratio-lg-21x9 {
--bs-aspect-ratio: 42.8571428571%;
}
.ratio-lg-9x21 {
--bs-aspect-ratio: 233.3333333333%;
}
.ratio-lg-9x32 {
--bs-aspect-ratio: 355.5555555556%;
}
.ratio-lg-32x9 {
--bs-aspect-ratio: 28.125%;
}
}
/* Extra large */
@media (min-width: 1200px) {
.ratio-xl-1x1 {
--bs-aspect-ratio: 100%;
}
.ratio-xl-1x2 {
--bs-aspect-ratio: 200%;
}
.ratio-xl-2x1 {
--bs-aspect-ratio: 50%;
}
.ratio-xl-1x3 {
--bs-aspect-ratio: 300%;
}
.ratio-xl-3x1 {
--bs-aspect-ratio: 33.3333333333%;
}
.ratio-xl-1x4 {
--bs-aspect-ratio: 400%;
}
.ratio-xl-4x1 {
--bs-aspect-ratio: 25%;
}
.ratio-xl-1x5 {
--bs-aspect-ratio: 500%;
}
.ratio-xl-5x1 {
--bs-aspect-ratio: 20%;
}
.ratio-xl-3x2 {
--bs-aspect-ratio: 66.6666666667%;
}
.ratio-xl-2x3 {
--bs-aspect-ratio: 150%;
}
.ratio-xl-3x4 {
--bs-aspect-ratio: 133.3333333333%;
}
.ratio-xl-4x3 {
--bs-aspect-ratio: 75%;
}
.ratio-xl-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio-xl-9x16 {
--bs-aspect-ratio: 177.7777777778%;
}
.ratio-xl-21x9 {
--bs-aspect-ratio: 42.8571428571%;
}
.ratio-xl-9x21 {
--bs-aspect-ratio: 233.3333333333%;
}
.ratio-xl-9x32 {
--bs-aspect-ratio: 355.5555555556%;
}
.ratio-xl-32x9 {
--bs-aspect-ratio: 28.125%;
}
}
/* Extra extra large */
@media (min-width: 1400px) {
.ratio-xxl-1x1 {
--bs-aspect-ratio: 100%;
}
.ratio-xxl-1x2 {
--bs-aspect-ratio: 200%;
}
.ratio-xxl-2x1 {
--bs-aspect-ratio: 50%;
}
.ratio-xxl-1x3 {
--bs-aspect-ratio: 300%;
}
.ratio-xxl-3x1 {
--bs-aspect-ratio: 33.3333333333%;
}
.ratio-xxl-1x4 {
--bs-aspect-ratio: 400%;
}
.ratio-xxl-4x1 {
--bs-aspect-ratio: 25%;
}
.ratio-xxl-1x5 {
--bs-aspect-ratio: 500%;
}
.ratio-xxl-5x1 {
--bs-aspect-ratio: 20%;
}
.ratio-xxl-3x2 {
--bs-aspect-ratio: 66.6666666667%;
}
.ratio-xxl-2x3 {
--bs-aspect-ratio: 150%;
}
.ratio-xxl-3x4 {
--bs-aspect-ratio: 133.3333333333%;
}
.ratio-xxl-4x3 {
--bs-aspect-ratio: 75%;
}
.ratio-xxl-16x9 {
--bs-aspect-ratio: 56.25%;
}
.ratio-xxl-9x16 {
--bs-aspect-ratio: 177.7777777778%;
}
.ratio-xxl-21x9 {
--bs-aspect-ratio: 42.8571428571%;
}
.ratio-xxl-9x21 {
--bs-aspect-ratio: 233.3333333333%;
}
.ratio-xxl-9x32 {
--bs-aspect-ratio: 355.5555555556%;
}
.ratio-xxl-32x9 {
--bs-aspect-ratio: 28.125%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment