Ratio

Preview

This is a preview of the Bootstrap element. For more details, please visit the official Bootstrap page.

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.

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

Example

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

<div class="ratio ratio-1x1" style="max-width: 281px;">
    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>