diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index d6c7eda014..06350ccd34 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -200,9 +200,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: 15%;
+  right: ((100% - $carousel-caption-width) / 2);
   bottom: 20px;
-  left: 15%;
+  left: ((100% - $carousel-caption-width) / 2);
   z-index: 10;
   padding-top: 20px;
   padding-bottom: 20px;
@@ -240,8 +240,8 @@
 
   // Show and left align the captions
   .carousel-caption {
-    right: 20%;
-    left: 20%;
+    right: ((100% - $carousel-caption-sm-up-width) / 2);
+    left: ((100% - $carousel-caption-sm-up-width) / 2);
     padding-bottom: 30px;
   }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index c02af45f55..a27a5d16ba 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -769,6 +769,8 @@ $carousel-control-font-size:                  20px !default;
 $carousel-indicator-active-bg:                #fff !default;
 $carousel-indicator-border-color:             #fff !default;
 
+$carousel-caption-width:                      70% !default;
+$carousel-caption-sm-up-width:                60% !default;
 $carousel-caption-color:                      #fff !default;