diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 2e06e70d1..744ec2f56 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -201,9 +201,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;
@@ -241,8 +241,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 fdd917f8a..637c62d8e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -783,6 +783,8 @@ $carousel-indicator-active-size:              12px !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;