From 95dffb327990a0690aec1719b2efbb91dfbb7c4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Carlos=20Gonz=C3=A1lez=20Cabrero?=
 <malkomich@gmail.com>
Date: Tue, 17 May 2016 15:14:07 +0200
Subject: [PATCH] Add new extra large size for modal containers

---
 docs/components/modal.md | 31 ++++++++++++++++++++++++++++++-
 scss/_modal.scss         |  4 ++++
 scss/_variables.scss     |  1 +
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/docs/components/modal.md b/docs/components/modal.md
index 16689f6ae0..56b4dfc2af 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">&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 9d2a86776d..468649975a 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 8805b909e6..da7ec8c0e3 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;