Bootstrap ~5.3.0 only has a fixed ratio for all media and screes sizes
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 breakpoint.
Use the normal ration classes for mobiles which less than -sm
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";
Vartheme BS5 and Varbase Components are using the following default aspect ratios
// Override bootstrap ~5.3.0 variables
// ----------------------------------------------------------------
// See more about override Bootstrap ~5.3.0 variables here:
// https://getbootstrap.com/docs/5.3/customize/sass
// https://github.com/twbs/bootstrap/blob/v5.3.1/scss/_variables.scss
// Override aspect ratios array to add more ratios.
$aspect-ratios: (
"1x1": 100%,
"2x1": calc(1 / 2 * 100%),
"3x1": calc(1 / 3 * 100%),
"4x1": calc(1 / 4 * 100%),
"4x3": calc(3 / 4 * 100%),
"16x9": calc(9 / 16 * 100%),
"21x9": calc(9 / 21 * 100%),
);
As of 📌 Add Dynamic Responsive Image (or drimage) module to Varbase Media Fixed
Fixed
3.0
Code
Issue #3386988 by Rajab Natshah, Ahmad Abbad: Add the Bootstrap Ratio...
Automatically closed - issue fixed for 2 weeks with no activity.