Ratios

About #

Use the ratio helper to manage the aspect ratios of external content like <iframe>, <embed>, <video>, and <object>. These helpers also can be used on any standard HTML child element (e.g., a <div> or <img>). Styles are applied from the parent .ratio class directly to the child. Please note, you don't need frameborder="0" on your <iframe> elements as we override that.

Example #

Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.

<div class="ratio ratio-16x9 specific-w-450 mw-100 mx-auto rounded-3 overflow-hidden">
  <iframe src="https://www.youtube.com/embed/X59FCW3vOlE" title="YouTube video" allowfullscreen></iframe>
</div>

Aspect ratios #

Aspect ratios can be customized with the following modifier classes: .ratio-1x1, .ratio-4x3, .ratio-16x9, and .ratio-21x9.

<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>

Custom ratios #

Each .ratio-* class includes a CSS variable in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part. For example, to create a 2x1 aspect ratio, set --bs-aspect-ratio: 50% on the .ratio.

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>