diff options
| -rw-r--r-- | docs/components/modal.md | 31 | ||||
| -rw-r--r-- | scss/_modal.scss | 4 | ||||
| -rw-r--r-- | scss/_variables.scss | 1 |
3 files changed, 35 insertions, 1 deletions
diff --git a/docs/components/modal.md b/docs/components/modal.md index 16689f6ae..56b4dfc2a 100644 --- a/docs/components/modal.md +++ b/docs/components/modal.md @@ -422,14 +422,26 @@ Embedding YouTube videos in modals requires additional JavaScript not in Bootstr ## Optional sizes -Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. +Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. <div class="bd-example"> + <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> </div> {% highlight html %} +<!-- Extra large modal --> +<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button> + +<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-xl"> + <div class="modal-content"> + ... + </div> + </div> +</div> + <!-- Large modal --> <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> @@ -453,6 +465,23 @@ Modals have two optional sizes, available via modifier classes to be placed on a </div> {% endhighlight %} +<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-xl"> + <div class="modal-content"> + + <div class="modal-header"> + <h4 class="modal-title" id="myExtraLargeModalLabel">Extra large modal</h4> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div class="modal-body"> + ... + </div> + </div> + </div> +</div> + <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> diff --git a/scss/_modal.scss b/scss/_modal.scss index 9d2a86776..468649975 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -140,3 +140,7 @@ @include media-breakpoint-up(lg) { .modal-lg { max-width: $modal-lg; } } + +@include media-breakpoint-up(xl) { + .modal-xl { max-width: $modal-xl; } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 8805b909e..da7ec8c0e 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -791,6 +791,7 @@ $modal-header-border-width: $modal-content-border-width !default; $modal-footer-border-width: $modal-header-border-width !default; $modal-header-padding: 15px !default; +$modal-xl: 1200px !default; $modal-lg: 800px !default; $modal-md: 500px !default; $modal-sm: 300px !default; |