From b29e3f2a4c4cf105363ca4153841d0c8e8de3941 Mon Sep 17 00:00:00 2001
From: Andres Galante <agalante@gmail.com>
Date: Fri, 24 Nov 2017 19:28:58 -0300
Subject: [PATCH] lets the centered modal have any height (#24803)

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

diff --git a/docs/4.0/components/modal.md b/docs/4.0/components/modal.md
index 214ed01169..5a6e000e92 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. **Do not use this with long modals**—it will overflow the viewport and potentially hide parts of your modal.
+Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
 
 <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">
diff --git a/scss/_modal.scss b/scss/_modal.scss
index bd4abc7c64..edda836636 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -53,9 +53,7 @@
 .modal-dialog-centered {
   display: flex;
   align-items: center;
-  height: 100%;
-  margin-top: 0;
-  margin-bottom: 0;
+  min-height: calc(100% - (#{$modal-dialog-margin} * 2));
 }
 
 // Actual modal
@@ -154,8 +152,7 @@
   }
 
   .modal-dialog-centered {
-    margin-top: 0;
-    margin-bottom: 0;
+    min-height: calc(100% - (#{$modal-dialog-margin-y-sm-up} * 2));
   }
 
   .modal-content {