basic cleanup on carousel example (fixes #9709 and #9700)

2 files changed, 37 insertions, 31 deletions

diff --git a/examples/carousel/carousel.css b/examples/carousel/carousel.css
index dd7dfc424..452fdfeed 100644
--- a/examples/carousel/carousel.css
+++ b/examples/carousel/carousel.css
@@ -78,25 +78,9 @@ body {
 .featurette-divider {
   margin: 80px 0; /* Space out the Bootstrap <hr> more */
 }
-.featurette {
-  padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
-  overflow: hidden; /* Vertically center images part 2: clear their floats. */
-}
-.featurette-image {
-  margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
-}
-
-/* Give some space on the sides of the floated elements so text doesn't run right into it. */
-.featurette-image.pull-left {
-  margin-right: 40px;
-}
-.featurette-image.pull-right {
-  margin-left: 40px;
-}
 
 /* Thin out the marketing headings */
 .featurette-heading {
-  font-size: 50px;
   font-weight: 300;
   line-height: 1;
   letter-spacing: -1px;
@@ -131,4 +115,14 @@ body {
     line-height: 1.4;
   }
 
+  .featurette-heading {
+    font-size: 50px;
+  }
+
+}
+
+@media (min-width: 992px) {
+  .featurette-heading {
+    margin-top: 120px;
+  }
 }
diff --git a/examples/carousel/index.html b/examples/carousel/index.html
index 6e5edbbec..fa95ab64b 100644
--- a/examples/carousel/index.html
+++ b/examples/carousel/index.html
@@ -69,7 +69,7 @@
       </ol>
       <div class="carousel-inner">
         <div class="item active">
-          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:First slide" alt="">
+          <img data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:First slide" alt="">
           <div class="container">
             <div class="carousel-caption">
               <h1>Example headline.</h1>
@@ -79,7 +79,7 @@
           </div>
         </div>
         <div class="item">
-          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Second slide" alt="">
+          <img data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Second slide" alt="">
           <div class="container">
             <div class="carousel-caption">
               <h1>Another example headline.</h1>
@@ -89,7 +89,7 @@
           </div>
         </div>
         <div class="item">
-          <img data-src="holder.js/1500x500/auto/#777:#7a7a7a/text:Third slide" alt="">
+          <img data-src="holder.js/100%x500/auto/#777:#7a7a7a/text:Third slide" alt="">
           <div class="container">
             <div class="carousel-caption">
               <h1>One more for good measure.</h1>
@@ -138,26 +138,38 @@
 
       <hr class="featurette-divider">
 
-      <div class="featurette">
-        <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
-        <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
-        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto">
+        </div>
       </div>
 
       <hr class="featurette-divider">
 
-      <div class="featurette">
-        <img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
-        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
-        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      <div class="row featurette">
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto">
+        </div>
+        <div class="col-md-7">
+          <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
       </div>
 
       <hr class="featurette-divider">
 
-      <div class="featurette">
-        <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
-        <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
-        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+      <div class="row featurette">
+        <div class="col-md-7">
+          <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
+          <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
+        </div>
+        <div class="col-md-5">
+          <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto">
+        </div>
       </div>
 
       <hr class="featurette-divider">