Last active
July 22, 2023 23:56
-
-
Save uzielweb/974a7ddc678fd124bce8b7c69ebb886e to your computer and use it in GitHub Desktop.
Custom Bootstrap Ratios
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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