diff options
| -rw-r--r-- | docs/components/utilities.md | 7 | ||||
| -rw-r--r-- | scss/_responsive-embed.scss | 5 |
2 files changed, 11 insertions, 1 deletions
diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 57a5d87b9..f67cb630f 100644 --- 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 c1ef6cb4b..bedab270a 100644 --- 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%; |