diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 01ad613e0f..18286b539f 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -121,6 +121,8 @@
   bottom: 10px;
   left: 0;
   z-index: 15;
+  display: flex;
+  justify-content: center;
   padding-left: 0; // override <ul> default
   // Use the .carousel-control's width as margin so we don't overlay those
   margin-right: $carousel-control-width;
@@ -130,9 +132,11 @@
 
   li {
     position: relative;
-    display: inline-block;
-    width: $carousel-indicator-width;
+    flex: 1 0 auto;
+    max-width: $carousel-indicator-width;
     height: $carousel-indicator-height;
+    margin-right: $carousel-indicator-spacer;
+    margin-left: $carousel-indicator-spacer;
     text-indent: -999px;
     cursor: pointer;
     background-color: rgba($carousel-indicator-active-bg, .5);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b76064d967..e12ccd149c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -912,6 +912,7 @@ $carousel-control-opacity:                    .5 !default;
 
 $carousel-indicator-width:                    30px !default;
 $carousel-indicator-height:                   3px !default;
+$carousel-indicator-spacer:                   3px !default;
 $carousel-indicator-active-bg:                #fff !default;
 
 $carousel-caption-width:                      70% !default;