Utilities
Bootstrap 5 Ratios
Bootstrap 5 ratio helpers for AdminKit: keep responsive video and slideshow embeds at 1x1, 4x3, 16x9 or 21x9 with the .ratio classes.
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">
<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>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>About
Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s. 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.
Last updated on