Ratios

Aspect Ratios

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:[ratio-1x1 / ratio-4x3 / ratio-16x9 / ratio-21x9].

<div class="row gap-lg-0 gap-4">
 <div class="col-lg-3">
   <div class="ratio ratio-1x1">
     <iframe src="https://www.youtube.com/embed/AsZwvuUmHGU?si=LHExkFd586NQbVAG" title="YouTube video" allowfullscreen=""></iframe>
   </div>
 </div>
 <div class="col-lg-3">
   <div class="ratio ratio-4x3">
     <iframe src="https://www.youtube.com/embed/qDL2HBPy9uQ?si=yyIowrbZW-C-3lxd" title="YouTube video" allowfullscreen=""></iframe>
   </div>
 </div>
 <div class="col-lg-3">
   <div class="ratio ratio-16x9">
     <iframe src="https://www.youtube.com/embed/AsZwvuUmHGU?si=LHExkFd586NQbVAG" title="YouTube video" allowfullscreen=""></iframe>
   </div>
 </div>
 <div class="col-lg-3">
   <div class="ratio ratio-21x9">
     <iframe src="https://www.youtube.com/embed/qDL2HBPy9uQ?si=yyIowrbZW-C-3lxd" title="YouTube video" allowfullscreen=""></iframe>
   </div>
 </div>
</div>

Custom Ratio

Wrap any embed, like an <iframe> , in a parent element with ratio and an aspect ratio class. Here is a breakdown of these ratios: ratio-4x3.

<div class="ratio ratio-4x3">
 <iframe src="https://www.youtube.com/embed/AsZwvuUmHGU?si=LHExkFd586NQbVAG" title="YouTube video" allowfullscreen=""></iframe>
</div>

Default Ratio

Wrap any embed, like an <iframe> , in a parent element with ratio and an aspect ratio class. Here is a breakdown of these ratios: 16x9 ratio.

<div class="ratio ratio-16x9">
 <iframe src="https://www.youtube.com/embed/qDL2HBPy9uQ?si=yyIowrbZW-C-3lxd" title="YouTube video" allowfullscreen=""></iframe>
</div>