diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 3936d8c203..e91f255391 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -24,9 +24,9 @@
   }
   .modal {
     position: absolute;
-    top: 20px;
-    left: 20px;
-    right: 20px;
+    top: 10px;
+    left: 10px;
+    right: 10px;
     width: auto;
     margin: 0;
   }
@@ -35,6 +35,10 @@
   }
   .modal-header .close {
     padding: 10px;
+    margin: -10px;
+  }
+  .carousel-caption {
+    position: static;
   }
 }
 @media (max-width: 768px) {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index cd0d620bf4..7a55680417 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1986,7 +1986,7 @@ table .span12 {
 .navbar-search .search-query :-moz-placeholder {
   color: #eeeeee;
 }
-.navbar-search .search-query::-webkit-input-placeholder {
+.navbar-search .search-query ::-webkit-input-placeholder {
   color: #eeeeee;
 }
 .navbar-search .search-query:hover {
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 41029ded1f..0b221e3b26 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -723,6 +723,15 @@ form.well {
     word-wrap: break-word;
     word-break: break-all;
   }
+
+  /* Modal example */
+  .modal-example .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+  }
 }
 
 
diff --git a/docs/javascript.html b/docs/javascript.html
index 0bcbe597cb..2d31f0aa4a 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -193,7 +193,7 @@
         <div class="span9 columns">
           <h2>Static example</h2>
           <p>Below is a statically rendered modal.</p>
-          <div class="well" style="background-color: #888; border: none;">
+          <div class="well modal-example" style="background-color: #888; border: none;">
             <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
               <div class="modal-header">
                 <a href="#" class="close" data-dismiss="modal">&times;</a>
@@ -743,7 +743,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>number | object</td>
                <td>0</td>
                <td>
-                <p>delay showing/hiding the tooltip (ms)</p>
+                <p>delay showing and hiding the tooltip (ms)</p>
                 <p>If a number is supplied, delay is applied to both hide/show</p>
                 <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
                </td>
@@ -855,7 +855,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>number | object</td>
                <td>0</td>
                <td>
-                <p>delay showing/hiding the popover (ms)</p>
+                <p>delay showing and hiding the popover (ms)</p>
                 <p>If a number is supplied, delay is applied to both hide/show</p>
                 <p>Object structure is: <code>delay: { show: 500, hide: 100 }</code></p>
                </td>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index ee70bf21b4..01b14b6765 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -128,7 +128,7 @@
         <div class="span9 columns">
           <h2>{{_i}}Static example{{/i}}</h2>
           <p>{{_i}}Below is a statically rendered modal.{{/i}}</p>
-          <div class="well" style="background-color: #888; border: none;">
+          <div class="well modal-example" style="background-color: #888; border: none;">
             <div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
               <div class="modal-header">
                 <a href="#" class="close" data-dismiss="modal">&times;</a>
@@ -678,7 +678,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>{{_i}}number | object{{/i}}</td>
                <td>0</td>
                <td>
-                <p>{{_i}}delay showing/hiding the tooltip (ms){{/i}}</p>
+                <p>{{_i}}delay showing and hiding the tooltip (ms){{/i}}</p>
                 <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
                 <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
                </td>
@@ -790,7 +790,7 @@ $('a[data-toggle="tab"]').on('shown', function (e) {
                <td>{{_i}}number | object{{/i}}</td>
                <td>0</td>
                <td>
-                <p>{{_i}}delay showing/hiding the popover (ms){{/i}}</p>
+                <p>{{_i}}delay showing and hiding the popover (ms){{/i}}</p>
                 <p>{{_i}}If a number is supplied, delay is applied to both hide/show{{/i}}</p>
                 <p>{{_i}}Object structure is: <code>delay: { show: 500, hide: 100 }</code>{{/i}}</p>
                </td>
diff --git a/less/responsive.less b/less/responsive.less
index 6ba31b5c93..24b58d2ab7 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -56,15 +56,21 @@
   // Modals
   .modal {
     position: absolute;
-    top: 20px;
-    left: 20px;
-    right: 20px;
+    top:   10px;
+    left:  10px;
+    right: 10px;
     width: auto;
     margin: 0;
     &.fade.in { top: auto; }
   }
   .modal-header .close {
     padding: 10px;
+    margin: -10px;
+  }
+
+  // Carousel
+  .carousel-caption {
+    position: static;
   }
 
 }