Aspect Ratio Boxes

Aspect Ratio Helper

Use .ratio with modifiers like .ratio-16x9 or .ratio-1x1 to maintain consistent aspect ratios for images and iframes.

Example

<div class="ratio ratio-16x9">
  <img src="video-thumb.jpg" class="img-fluid" alt="Thumbnail"
       style="object-fit: cover;">
</div>

<div class="ratio ratio-1x1 w-25">
  <img src="avatar.jpg" alt="Avatar" style="object-fit: cover;">
</div>

HTML

Full Editor

Pro Tip

The .ratio utility uses a padding-top trick to enforce aspect ratio regardless of content.

Related Resources

Bootstrap Reference

Complete tag & property list

Bootstrap How-To Guides

Step-by-step practical guides

Bootstrap Exercises

Practice what you've learned