Add 21x9 responsive embed modifier

- Credit: @adammacias
- Fixes #16499

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 57a5d87b97b7009fdb1671a57aef72d59ecec8e0..f67cb630f2103a7d234ad6b182f912c22988b0e6 100644 (file)
--- a/docs/components/utilities.md
+++ b/docs/components/utilities.md
@@ -296,9 +296,14 @@ Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` e
 </div>
 {% endexample %}
 
-Aspect ratios can be customized. There are two available in Bootstrap, 16x9 and 4x3 (two of the most common for video).
+Aspect ratios can be customized with modifier classes.
 
 {% highlight html %}
+<!-- 21:9 aspect ratio -->
+<div class="embed-responsive embed-responsive-21by9">
+  <iframe class="embed-responsive-item" src="..."></iframe>
+</div>
+
 <!-- 16:9 aspect ratio -->
 <div class="embed-responsive embed-responsive-16by9">
   <iframe class="embed-responsive-item" src="..."></iframe>

diff --git a/scss/_responsive-embed.scss b/scss/_responsive-embed.scss
index c1ef6cb4baeddba944854f5af0e7966268060700..bedab270a1055b18e453e7923d9fd48a55e1f135 100644 (file)
--- a/scss/_responsive-embed.scss
+++ b/scss/_responsive-embed.scss
@@ -26,6 +26,11 @@
   }
 }
 
+// Modifier class for 21:9 aspect ratio
+.embed-responsive-21by9 {
+  padding-bottom: 42.85%;
+}
+
 // Modifier class for 16:9 aspect ratio
 .embed-responsive-16by9 {
   padding-bottom: 56.25%;