Bootstrap 5 Aspect ratios

Last Updated : 22 Dec, 2022

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 16×9 aspect ratio.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <title>GeeksForGeeks</title>
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center m-3">
        Bootstrap 5 Aspect ratios
    </h2>
    <hr>
 
    <div class="ratio ratio-16x9">
        <iframe src="https://www.youtube.com/embed/Pt2vYaJgGy8"
                title="YouTube video" allowfullscreen>
        </iframe>
    </div>
</body>
</html>

Output:

16×9 Aspect ratios of YouTube Video

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

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
        integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <title>GeeksForGeeks</title>
</head>
 
<body>
    <h1 class="text-success text-center">
        GeeksforGeeks
    </h1>
    <h2 class="text-center m-3">
        Bootstrap 5 Default Aspect ratios
    </h2>
    <hr>
 
    <div class="w-50">
        <div class="ratio ratio-1x1">
            <iframe src="https://www.youtube.com/embed/fyo53bLMyA4"
            title="YouTube video" allowfullscreen>
            </iframe>
        </div>
    </div>
</body>
</html>