Bootstrap 5 Ratios SASS Map

Ratios Sass map in Bootstrap 5 is a default list of aspect ratios. You can modify the aspect ratios you want to use.

Bootstrap 5 Ratios Sass map variables of  Ratios:

• $ratio : This variable defines the percentage for 1x1, 4x3, 16x9, 21x9.

Steps to override SCSS of Bootstrap:

Step 1: Install bootstrap using the following command

npm i bootstrap

Step 2: Create your custom scss file and write the variable you want to override. Then include the bootstrap scss file using import.

@import "../node_modules/bootstrap/scss/bootstrap.scss";
$variable_to_override: value;

Step 3: Convert the SCSS file to CSS using live server extension.

Step 4: Include that CSS in your HTML file.

Project Structure :

👁 Image

Our default aspect-ratios map:

$aspect-ratios: (
 "1x1": 100%,
 "4x3": calc(3 / 4 * 100%),
 "16x9": calc(9 / 16 * 100%),
 "21x9": calc(9 / 21 * 100%)
);

Syntax :

@import "../node_modules/bootstrap/scss/bootstrap.scss";

$ratio: **;

.ratio-* {
 --#{$variable-prefix}aspect-ratio: #{$ratio};
}

The '*' is replaced by 1x1, 4x3, 16x9, 21x9 and '**' is replaced by whatever value you want to change the original variables by.

Example 1 : Modified .ratio-1x1 from 100% to 20%.

SCSS: style.scss

CSS: style.css

HTML: index.html

Output :

👁 Bootstrap 5 Ratios SASS Map

Example 2: Modified .ratio-4x3 from 75% to 25% and .ratio-16x9 from (9/16 * 100%) to (1/16 * 100%).

SCSS: style.scss

CSS: style.css

HTML: index.html

Output :

👁 Bootstrap 5 Ratios SASS Map

Reference: https://getbootstrap.com/docs/5.0/helpers/ratio/#sass-map