diff --git a/docs/javascript.html b/docs/javascript.html
index bc5d606cd4..79de4f6a55 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -214,7 +214,7 @@ $('#myModal').on('show', function (e) {
           <h3>Live demo</h3>
           <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h3 id="myModalLabel">Modal Heading</h3>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index b62bbfc3cb..450f98ba47 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -144,7 +144,7 @@ $('#myModal').on('show', function (e) {
           <h3>{{_i}}Live demo{{/i}}</h3>
           <p>{{_i}}Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.{{/i}}</p>
           <!-- sample modal content -->
-          <div id="myModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+          <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
               <h3 id="myModalLabel">{{_i}}Modal Heading{{/i}}</h3>