diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 3942309f0f..025edd4cc2 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -25,20 +25,20 @@ When building carousels, be sure your slides are the same size as one another. T
   </ol>
   <div class="carousel-inner" role="listbox">
     <div class="carousel-item active">
-      <img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide">
+      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
     </div>
     <div class="carousel-item">
-      <img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide">
+      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
     </div>
     <div class="carousel-item">
-      <img data-src="holder.js/900x500/auto/#555:#333/text:Third slide" alt="Third slide">
+      <img class="d-block img-fluid" data-src="holder.js/800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
     </div>
   </div>
-  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
+  <a class="carousel-control carousel-control-left" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="icon-prev" aria-hidden="true"></span>
     <span class="sr-only">Previous</span>
   </a>
-  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
+  <a class="carousel-control carousel-control-right" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="icon-next" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
   </a>