Bootstrap 5 Aspect ratios

Bootstrap 5 Aspect ratios simply refer to the proportionality between an element's height and width. The aspect ratios are responsible and useful while handling the widths and heights of embedded items, videos, images, etc. Regardless of the width, the height-width relation remains the same as specified. In Bootstrap 5, by default, the four aspect ratios are defined. But Modifier classes can be used to customize aspect ratios.

Bootstrap 5 aspect ratio used Classes:

• ratio-*: If you use the ratio class, you can manage and manipulate aspect ratios of external content like <iframe>, <embed>, <video>, and <object>.

Syntax: The * can be replaceable with 1*1, 4*3, 16*9, and 21*9.

<div class="=ratio ratio-*">
 ...
</div>

Example 1: Here is an example of how aspect ratios are used with the <iframe> element while embedding the YouTube video. Here we have used the 16x9 aspect ratio. 

Output:

👁 Bootstrap 5 Aspect ratios

Example 2: This example shows the embedded YouTube video in a 1x1 aspect ratio.

Output:

👁 Bootstrap 5 Aspect ratios

References: https://getbootstrap.com/docs/5.0/helpers/ratio/#aspect-ratios