diff --git a/docs/javascript.html b/docs/javascript.html
index c910a5ce5..56132300c 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -1347,7 +1347,7 @@ $('#myCollapsible').on('hidden', function () {
           <h3>Markup</h3>
           <p>Data attributes are used for the previous and next conrols. Check out the example markup below.</p>
 <pre class="prettyprint linenums">
-&lt;div id="myCarousel" class="carousel"&gt;
+&lt;div id="myCarousel" class="carousel slide"&gt;
   &lt;!-- Carousel items --&gt;
   &lt;div class="carousel-inner"&gt;
     &lt;div class="active item"&gt;…&lt;/div&gt;
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index ba3787561..4ed30284a 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -1270,7 +1270,7 @@ $('#myCollapsible').on('hidden', function () {
           <h3>{{_i}}Markup{{/i}}</h3>
           <p>{{_i}}Data attributes are used for the previous and next conrols. Check out the example markup below.{{/i}}</p>
 <pre class="prettyprint linenums">
-&lt;div id="myCarousel" class="carousel"&gt;
+&lt;div id="myCarousel" class="carousel slide"&gt;
   &lt;!-- {{_i}}Carousel items{{/i}} --&gt;
   &lt;div class="carousel-inner"&gt;
     &lt;div class="active item"&gt;…&lt;/div&gt;