Fixes #8385: update carousel captions

* No longer hidden by default--up to users to figure that part out with
longer content
* Cleaned up styles and spacing

dist/css/bootstrap.css

@@ -4410,12 +4410,12 @@ a.list-group-item.active > .badge,
 
 .carousel-indicators {
   position: absolute;
-  bottom: 20px;
+  bottom: 10px;
   left: 50%;
   z-index: 15;
-  width: 100px;
+  width: 120px;
   padding-left: 0;
-  margin-left: -50px;
+  margin-left: -60px;
   text-align: center;
   list-style: none;
 }
@@ -4470,6 +4470,9 @@ a.list-group-item.active > .badge,
     left: 20%;
     padding-bottom: 30px;
   }
+  .carousel-indicators {
+    bottom: 20px;
+  }
 }
 
 .jumbotron {

javascript.html

@@ -1508,13 +1508,13 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
                 </ol>
                 <div class="carousel-inner">
                   <div class="item active">
-                    <img data-src="holder.js/900x500/auto/#777:#fff/text:First slide" alt="">
+                    <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="">
                   </div>
                   <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Second slide" alt="">
+                    <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="">
                   </div>
                   <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#fff/text:Third slide" alt="">
+                    <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="">
                   </div>
                 </div>
                 <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
@@ -1561,10 +1561,6 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
 
             <h3>Optional captions</h3>
             <p>Add captions to your slides easily with the <code>.carousel-caption</code> element within any <code>.item</code>. Place just about any optional HTML within there and it will be automatically aligned and formatted.</p>
-            <div class="bs-callout bs-callout-info">
-              <h4>Responsive visibility</h4>
-              <p><strong>Captions are hidden by default</strong> and will show up only with viewports greater than 768px wide.</p>
-            </div>
             <div class="bs-example">
               <div id="carousel-example-captions" class="carousel slide bs-docs-carousel-example">
                 <ol class="carousel-indicators">
@@ -1581,14 +1577,14 @@ $('#myCollapsible').on('hidden.bs.collapse', function () {
                     </div>
                   </div>
                   <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+                    <img data-src="holder.js/900x500/auto/#666:#666" alt="">
                     <div class="carousel-caption">
                       <h3>Second slide label</h3>
                       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                     </div>
                   </div>
                   <div class="item">
-                    <img data-src="holder.js/900x500/auto/#777:#777" alt="">
+                    <img data-src="holder.js/900x500/auto/#555:#5555" alt="">
                     <div class="carousel-caption">
                       <h3>Third slide label</h3>
                       <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>

less/carousel.less

@@ -129,11 +129,11 @@
 // -----------------------------
 .carousel-indicators {
   position: absolute;
-  bottom: 20px;
+  bottom: 10px;
   left: 50%;
   z-index: 15;
-  width: 100px;
-  margin-left: -50px;
+  width: 120px;
+  margin-left: -60px;
   padding-left: 0;
   list-style: none;
   text-align: center;
@@ -196,4 +196,9 @@
     right: 20%;
     padding-bottom: 30px;
   }
+
+  // Move up the indicators
+  .carousel-indicators {
+    bottom: 20px;
+  }
 }