diff options
| author | Mark Otto <[email protected]> | 2015-06-18 16:01:52 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-06-18 16:01:52 -0700 |
| commit | 331b8d2250f4b1ba29c0833e2be770c3f743ffe5 (patch) | |
| tree | 8722205f7cf4e9e32148b81ad160d1ba512f7fc0 | |
| parent | b39ce7d6c0079a18899f668943ddbd6d3b814fb5 (diff) | |
| download | bootstrap-331b8d2250f4b1ba29c0833e2be770c3f743ffe5.tar.xz bootstrap-331b8d2250f4b1ba29c0833e2be770c3f743ffe5.zip | |
Add 21x9 responsive embed modifier
- Credit: @adammacias
- Fixes #16499
| -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%; |