Ratio

Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.

Ratio Basic

Preview
HTML

                
                  <div class="ratio ratio-16x9">
                    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
                  </div>

Ratio Aspect

Preview
HTML

1x1

4x3

16x9

21x9

Custom Ratio 2x1

                
                  <div class="bg-light ratio ratio-1x1">
                    <div>1x1</div>
                  </div>
                  <div class="bg-light ratio ratio-4x3">
                    <div>4x3</div>
                  </div>
                  <div class="bg-light ratio ratio-16x9">
                    <div>16x9</div>
                  </div>
                  <div class="bg-light ratio ratio-21x9">
                    <div>21x9</div>
                  </div>

                  <div class="bg-light ratio" style="--aspect-ratio: 50%;">
                    <div>Custom Ratio 2x1</div>
                  </div>