diff --git a/scss/_modal.scss b/scss/_modal.scss
index ac116171aa..7fa82191fd 100644
--- a/scss/_modal.scss
+++ b/scss/_modal.scss
@@ -130,6 +130,7 @@
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
   padding: $modal-inner-padding - $modal-footer-margin-between * .5;
+  background-color: $modal-footer-bg;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include border-bottom-radius($modal-content-inner-border-radius);
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 19e3722ffd..f86d163727 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1390,6 +1390,7 @@ $modal-footer-border-width:         $modal-header-border-width !default;
 $modal-header-padding-y:            $modal-inner-padding !default;
 $modal-header-padding-x:            $modal-inner-padding !default;
 $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+$modal-footer-bg:                   null !default;
 
 $modal-sm:                          300px !default;
 $modal-md:                          500px !default;