Bootstrap Ratio Utilities

Bootstrap ~5.3.0 Documentation on Ratios

Aspect ratios

Custom ratios

Sass maps for $aspect-ratios

Having Two Bootstrap Ratio Utilities

Responsive ratio utility

Ratio Utility with responsive options, which needed for switching ratios for media breakpoints.

Adds (-sm, -md, -lg, -xl, -xxl) to ratio classes to change the ratio for that brackpoint
Use the normal ration classes for mobiles which less than -sm

Flip Ratio Utility

Flip Ratio Utility, which needed for flipping ratios for media breakpoints.

Adds (-flip-xs, -flip-sm, -flip-md, -flip-lg, -flip-xl, -flip-xxl) to ratio classes to change the ratio for that brackpoint
Use the -flip-xs ratio classes for mobiles which less than -flip-sm or -sm in case of using both ratio utilities at the same time

npm i bootstrap-ratio-utilities

yarn add bootstrap-ratio-utilities

Import the library in a custom bootstrap 4/5 theme base file bootstrap.base.scss or custom_theme.base.scss

// Custom theme base, with Bootstrap overrides.
// -----------------------------------------------------------------------------
@import "../node_modules/bootstrap/scss/functions";      // Bootstrap functions.
@import "../node_modules/bootstrap/scss/variables";      // Bootstrap variables.
@import "../node_modules/bootstrap/scss/variables-dark"; // Bootstrap variables dark.
@import "../node_modules/bootstrap/scss/maps";           // Bootstrap maps.
@import "../node_modules/bootstrap/scss/mixins";         // Bootstrap mixins.
@import "../node_modules/bootstrap/scss/utilities";      // Bootstrap utilities.
// -----------------------------------------------------------------------------

// Responsive ratio utility.
@import "../node_modules/bootstrap-ratio-utilities/utilities/scss/responsive-ratio.scss";

In case the Flip Ratio Utility was needed

// Flip ratio utility.
@import "../node_modules/bootstrap-ratio-utilities/utilities/scss/flip-ratio.scss";

Examples for Responsive ratio utility:

Example #1 responsive iframe ratio utility

<div class="ratio ratio-4x3 ratio-16x9-sm">
   <iframe src="https://youtube.com/embed/bTqVqk7FSmY?autoplay=1&mute=1" frameborder="0" allowtransparency="" width="1600" height="900" loading="lazy"></iframe>
</div>

Example #2: responsive Remote Video ratio with normal 4:3 ratio ratio-4x3 on mobiles, and ratio of 16:9 on tablets, medium, and large screens, But 21:9 on extra extra large screen sizes

<div class="varbase-video-player ratio ratio-4x3 ratio-16x9-sm ratio-21x9-xxl">
   <iframe src="https://youtube.com/embed/bTqVqk7FSmY?autoplay=1&mute=1" frameborder="0" allowtransparency="" width="1600" height="900" loading="lazy"></iframe>
</div>

Example #3: Responsive image ratio with normal 4:3 ratio ratio-4x3 on mobiles, and ratio of 16:9 on tables and larger screen sizes.

<div class="field field--name-field-media-image field--type-image ratio ratio-4x3 ratio-16x9-sm">
  <img src="https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg">
</div>

It can be integrated with Dynamic Responsive Image (or drimage)

Examples for Flip Ratio Utility:

Example #4: Flipped image ratio to 9:16 on mobiles and tables, but 16:9 on medium screen sizes and larger

<div class="ratio ratio-16x9-flip-xs ratio-16x9-flip-sm ratio-16x9-md">
  <img src="https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg">
</div>

It can be integrated with Dynamic Responsive Image (or drimage) with height integration and img-fluid