Ratio

Use the .ratio helper to manage aspect ratios of embedded iframes, videos, and other external content. The child element stretches to fill the parent container at the defined ratio.

How It Works

Wrap any embed in a .ratio container and add a ratio modifier. The child element receives position: absolute and fills the container.

ratio-1x1 (Square)

1x1

ratio-4x3

4x3

ratio-16x9 (Widescreen)

16x9

ratio-21x9 (Ultrawide)

21x9
Show Code
<!-- 1:1 Square -->
<div class="ratio ratio-1x1">
  <div>Content</div>
</div>

<!-- 4:3 -->
<div class="ratio ratio-4x3">
  <div>Content</div>
</div>

<!-- 16:9 Widescreen -->
<div class="ratio ratio-16x9">
  <div>Content</div>
</div>

<!-- 21:9 Ultrawide -->
<div class="ratio ratio-21x9">
  <div>Content</div>
</div>

Video Embed

Responsive YouTube or other video embeds — the most common use case for .ratio.

Show Code
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
    title="YouTube video"
    allowfullscreen>
  </iframe>
</div>

Custom Ratio

Use a CSS custom property --bs-aspect-ratio to define any custom ratio.

Custom 3:2 ratio

3:2 custom

Custom 9:16 (Portrait / Story)

9:16
Show Code
<!-- Custom ratio using CSS variable -->
<!-- Formula: height / width * 100% -->

<!-- 3:2 → 2/3 * 100 = 66.66% -->
<div class="ratio" style="--bs-aspect-ratio: 66.66%;">
  <div>Content</div>
</div>

<!-- 9:16 portrait → 16/9 * 100 = 177.77% -->
<div class="ratio" style="--bs-aspect-ratio: 177.77%;">
  <div>Content</div>
</div>

Ratio with Image

Combine .ratio with object-fit-cover to create perfectly sized image containers.

16x9 image

16:9

4x3 image

4:3

1x1 image

1:1

Show Code
<!-- Fixed-ratio image container -->
<div class="ratio ratio-16x9">
  <img src="photo.jpg" class="object-fit-cover rounded" alt="...">
</div>

<div class="ratio ratio-1x1">
  <img src="photo.jpg" class="object-fit-cover rounded-circle" alt="...">
</div>