About #

To control the aspect ratios of external material like iframes, embeds, videos, and objects, use the ratio helper. These tools can also be applied to any typical HTML child element (such as a <div> or <img>). Styles are directly transferred from the parent.ratio class to the kid.

Custom aspect ratios are also possible because aspect ratios are declared in a Sass map and included into each class via a CSS variable.

INFO

Example #

.ratio and an aspect ratio class should be used to enclose any embed, such as an <iframe>, in a parent element. The global selector .ratio > * automatically sizes the immediate child element.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

RESULT

Aspect ratios #

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

RESULT

Custom ratios #

A CSS custom property (or CSS variable) is present in the selector for each .ratio-* class. With a little simple arithmetic, developer can override this CSS option and instantly generate unique aspect ratios.

Set --bs-aspect-ratio: 50% on the .ratio, for instance, to produce a 2x1 aspect ratio.

<div class="ratio">
  <div>2x1</div>
</div>

The aspect ratio can be easily changed between breakpoints thanks to this CSS variable. The following starts out as 4x3, but at the medium breakpoint it switches to a bespoke 2x1.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>

RESULT

Sass map #

Alter the aspect ratios developer want to employ in _variables.scss. The default $ratio-aspect-ratios map is shown below. Recompile the Sass after making the desired changes to the map.

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