From 30263f2620d8b4e7e5f53ad52ab9d07e1d372e10 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 22 Oct 2017 22:32:51 -0700
Subject: [PATCH 1/5] Add .modal-dialog-centered for optional vertically
 cenetered modal

Fixes #23638
---
 docs/4.0/components/modal.md | 58 ++++++++++++++++++++++++++++++++++++
 scss/_modal.scss             |  8 +++++
 2 files changed, 66 insertions(+)

diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index c4191b83d1fe..d46d6fdaffcc 100644
--- a/docs/4.0/components/modal.md
+++ b/docs/4.0/components/modal.md
@@ -208,6 +208,64 @@ When modals become too long for the user's viewport or device, they scroll indep
 </div>
 {% endhighlight %}
 
+### Vertically centered
+
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+
+<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="bd-example">
+  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+    Launch demo modal
+  </button>
+</div>
+
+{% highlight html %}
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
+  Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
+        <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 class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary">Save changes</button>
+      </div>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
 ### Tooltips and popovers
 
 [Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
diff --git a/scss/_modal.scss b/scss/_modal.scss
index 5fabc83f46e8..f0f60b18069d 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -50,6 +50,14 @@
   }
 }
 
+.modal-dialog-centered {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 // Actual modal
 .modal-content {
   position: relative;

From 95384fbfc5d1f30446db027898d1bd447bb5ac38 Mon Sep 17 00:00:00 2001
From: Andres Galante <agalante@gmail.com>
Date: Mon, 23 Oct 2017 09:08:03 -0300
Subject: [PATCH 2/5] adds modal-dialog-centered class to docs and removes
 margin to avoid generating a vertical scrolling

---
 docs/4.0/components/modal.md | 2 +-
 scss/_modal.scss             | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index d46d6fdaffcc..ebb671a17abf 100644
--- a/docs/4.0/components/modal.md
+++ b/docs/4.0/components/modal.md
@@ -213,7 +213,7 @@ When modals become too long for the user's viewport or device, they scroll indep
 Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
diff --git a/scss/_modal.scss b/scss/_modal.scss
index f0f60b18069d..dc28bd2a6702 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -152,11 +152,17 @@
     margin: $modal-dialog-margin-y-sm-up auto;
   }
 
+  .modal-dialog-centered {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   .modal-content {
     @include box-shadow($modal-content-box-shadow-sm-up);
   }
 
   .modal-sm { max-width: $modal-sm; }
+
 }
 
 @include media-breakpoint-up(lg) {

From 630b06233e86b116c515710359f80d8c16046891 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 29 Oct 2017 09:17:21 -0700
Subject: [PATCH 3/5] mention limitations

---
 docs/4.0/components/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index ebb671a17abf..efed66585d19 100644
--- a/docs/4.0/components/modal.md
+++ b/docs/4.0/components/modal.md
@@ -210,7 +210,7 @@ When modals become too long for the user's viewport or device, they scroll indep
 
 ### Vertically centered
 
-Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
 
 <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">

From 7b6513d22bac79a330d01b1cbf0263ff9e967fe4 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 29 Oct 2017 09:17:28 -0700
Subject: [PATCH 4/5] fix aria attr

---
 docs/4.0/components/modal.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index efed66585d19..b9ebc4ad4bb0 100644
--- a/docs/4.0/components/modal.md
+++ b/docs/4.0/components/modal.md
@@ -212,7 +212,7 @@ When modals become too long for the user's viewport or device, they scroll indep
 
 Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
 
-<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter" aria-hidden="true">
+<div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-header">

From 6b86f9cc656703e8b45db22d5bcf82ea38675a0d Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 29 Oct 2017 10:08:44 -0700
Subject: [PATCH 5/5] Add `width: 100%` to the .modal-content for the centered
 version. Adding it here to avoid adding another selector by limiting it to
 the centered modal modifier.

---
 scss/_modal.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/_modal.scss b/scss/_modal.scss
index dc28bd2a6702..bd4abc7c6410 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -63,6 +63,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
   // counteract the pointer-events: none; in the .modal-dialog
   pointer-events: auto;
   background-color: $modal-content-bg;