Add new extra large size for modal containers

diff --git a/docs/components/modal.md b/docs/components/modal.md
index 16689f6ae05d437d666d7757c93eb900acac6f81..56b4dfc2af56e7ccfbd8f2f923590143032d994f 100644 (file)
--- 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">&times;</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 9d2a86776da60bd0c5ed98723b8941901d10ec19..468649975aa322f2169b2097a20e157506d92e90 100644 (file)
--- 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 8805b909e6e6b3a62f26b97d9d8887e2ce81dd4b..da7ec8c0e30e3fc0ef3d92f989ac206766fb17e9 100644 (file)
--- 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;