diff --git a/scss/_modal.scss b/scss/_modal.scss
index 8c5077d1c0..1b3ba6d82e 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -117,7 +117,7 @@
   // Automatically set modal's width for larger viewports
   .modal-dialog {
     max-width: $modal-md;
-    margin: 30px auto;
+    margin: $modal-dialog-sm-up-margin-y auto;
   }
 
   .modal-content {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 82558fdcc4..62a68d577c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -627,6 +627,7 @@ $label-font-weight:           bold !default;
 $modal-inner-padding:         15px !default;
 
 $modal-dialog-margin:         10px !default;
+$modal-dialog-sm-up-margin-y: 30px !default;
 
 $modal-title-padding:         15px !default;
 $modal-title-line-height:     $line-height-base !default;