Move .table-responsive from wrapper to .table

6 files changed, 463 insertions, 486 deletions

diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 619ea780f..eac86ef81 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -184,50 +184,48 @@ $('.carousel').carousel()
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 50px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>interval</td>
-       <td>number</td>
-       <td>5000</td>
-       <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
-     </tr>
-     <tr>
-       <td>keyboard</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Whether the carousel should react to keyboard events.</td>
-     </tr>
-     <tr>
-       <td>pause</td>
-       <td>string | null</td>
-       <td>"hover"</td>
-       <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td>
-     </tr>
-     <tr>
-       <td>ride</td>
-       <td>string</td>
-       <td>false</td>
-       <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
-     </tr>
-     <tr>
-       <td>wrap</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Whether the carousel should cycle continuously or have hard stops.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 50px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>interval</td>
+     <td>number</td>
+     <td>5000</td>
+     <td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
+   </tr>
+   <tr>
+     <td>keyboard</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Whether the carousel should react to keyboard events.</td>
+   </tr>
+   <tr>
+     <td>pause</td>
+     <td>string | null</td>
+     <td>"hover"</td>
+     <td>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>null</code>, hovering over the carousel won't pause it.</td>
+   </tr>
+   <tr>
+     <td>ride</td>
+     <td>string</td>
+     <td>false</td>
+     <td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
+   </tr>
+   <tr>
+     <td>wrap</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Whether the carousel should cycle continuously or have hard stops.</td>
+   </tr>
+  </tbody>
+</table>
 
 ### Methods
 
@@ -270,26 +268,24 @@ Bootstrap's carousel class exposes two events for hooking into carousel function
 
 All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>slide.bs.carousel</td>
-       <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
-     </tr>
-     <tr>
-       <td>slid.bs.carousel</td>
-       <td>This event is fired when the carousel has completed its slide transition.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>slide.bs.carousel</td>
+     <td>This event fires immediately when the <code>slide</code> instance method is invoked.</td>
+   </tr>
+   <tr>
+     <td>slid.bs.carousel</td>
+     <td>This event is fired when the carousel has completed its slide transition.</td>
+   </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myCarousel').on('slide.bs.carousel', function () {
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index e3172fa75..11017c234 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -124,32 +124,30 @@ $('.collapse').collapse()
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 50px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>parent</td>
-       <td>selector</td>
-       <td>false</td>
-       <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td>
-     </tr>
-     <tr>
-       <td>toggle</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Toggles the collapsible element on invocation</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 50px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>parent</td>
+     <td>selector</td>
+     <td>false</td>
+     <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td>
+   </tr>
+   <tr>
+     <td>toggle</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Toggles the collapsible element on invocation</td>
+   </tr>
+  </tbody>
+</table>
 
 ### Methods
 
@@ -179,36 +177,34 @@ Hides a collapsible element.
 
 Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>show.bs.collapse</td>
-       <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-     </tr>
-     <tr>
-       <td>shown.bs.collapse</td>
-       <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
-     </tr>
-     <tr>
-       <td>hide.bs.collapse</td>
-       <td>
-        This event is fired immediately when the <code>hide</code> method has been called.
-       </td>
-     </tr>
-     <tr>
-       <td>hidden.bs.collapse</td>
-       <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>show.bs.collapse</td>
+     <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+   </tr>
+   <tr>
+     <td>shown.bs.collapse</td>
+     <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td>
+   </tr>
+   <tr>
+     <td>hide.bs.collapse</td>
+     <td>
+      This event is fired immediately when the <code>hide</code> method has been called.
+     </td>
+   </tr>
+   <tr>
+     <td>hidden.bs.collapse</td>
+     <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td>
+   </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myCollapsible').on('hidden.bs.collapse', function () {
diff --git a/docs/components/modal.md b/docs/components/modal.md
index b311ebf35..5ace1ac58 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -508,44 +508,42 @@ Call a modal with id `myModal` with a single line of JavaScript:
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 50px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>backdrop</td>
-       <td>boolean or the string <code>'static'</code></td>
-       <td>true</td>
-       <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
-     </tr>
-     <tr>
-       <td>keyboard</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Closes the modal when escape key is pressed</td>
-     </tr>
-     <tr>
-       <td>focus</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Puts the focus on the modal when initialized.</td>
-     </tr>
-     <tr>
-       <td>show</td>
-       <td>boolean</td>
-       <td>true</td>
-       <td>Shows the modal when initialized.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 50px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>backdrop</td>
+     <td>boolean or the string <code>'static'</code></td>
+     <td>true</td>
+     <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code> for a backdrop which doesn't close the modal on click.</td>
+   </tr>
+   <tr>
+     <td>keyboard</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Closes the modal when escape key is pressed</td>
+   </tr>
+   <tr>
+     <td>focus</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Puts the focus on the modal when initialized.</td>
+   </tr>
+   <tr>
+     <td>show</td>
+     <td>boolean</td>
+     <td>true</td>
+     <td>Shows the modal when initialized.</td>
+   </tr>
+  </tbody>
+</table>
 
 ### Methods
 
@@ -581,34 +579,32 @@ Manually hides a modal. **Returns to the caller before the modal has actually be
 
 Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">`).
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>show.bs.modal</td>
-       <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
-     </tr>
-     <tr>
-       <td>shown.bs.modal</td>
-       <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
-     </tr>
-     <tr>
-       <td>hide.bs.modal</td>
-       <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-     </tr>
-     <tr>
-       <td>hidden.bs.modal</td>
-       <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>show.bs.modal</td>
+     <td>This event fires immediately when the <code>show</code> instance method is called. If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+   </tr>
+   <tr>
+     <td>shown.bs.modal</td>
+     <td>This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the <code>relatedTarget</code> property of the event.</td>
+   </tr>
+   <tr>
+     <td>hide.bs.modal</td>
+     <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+   </tr>
+   <tr>
+     <td>hidden.bs.modal</td>
+     <td>This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+   </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myModal').on('hidden.bs.modal', function (e) {
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index 1cd96da49..e4ace2ed9 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -163,113 +163,111 @@ Enable popovers via JavaScript:
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 100px;">Name</th>
-        <th style="width: 100px;">Type</th>
-        <th style="width: 50px;">Default</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>animation</td>
-        <td>boolean</td>
-        <td>true</td>
-        <td>Apply a CSS fade transition to the popover</td>
-      </tr>
-      <tr>
-        <td>container</td>
-        <td>string | false</td>
-        <td>false</td>
-        <td>
-          <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>content</td>
-        <td>string | element | function</td>
-        <td>''</td>
-        <td>
-          <p>Default content value if <code>data-content</code> attribute isn't present.</p>
-          <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>delay</td>
-        <td>number | object</td>
-        <td>0</td>
-        <td>
-         <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</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>
-      </tr>
-      <tr>
-        <td>html</td>
-        <td>boolean</td>
-        <td>false</td>
-        <td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
-      </tr>
-      <tr>
-        <td>placement</td>
-        <td>string | function</td>
-        <td>'right'</td>
-        <td>
-          <p>How to position the popover - top | bottom | left | right.</p>
-          <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>selector</td>
-        <td>string</td>
-        <td>false</td>
-        <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
-      </tr>
-      <tr>
-        <td>template</td>
-        <td>string</td>
-        <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
-        <td>
-          <p>Base HTML to use when creating the popover.</p>
-          <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
-          <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
-          <p><code>.popover-arrow</code> will become the popover's arrow.</p>
-          <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>title</td>
-        <td>string | element | function</td>
-        <td>''</td>
-        <td>
-          <p>Default title value if <code>title</code> attribute isn't present.</p>
-          <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>trigger</td>
-        <td>string</td>
-        <td>'click'</td>
-        <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
-      </tr>
-      <tr>
-        <td>constraints</td>
-        <td>Array</td>
-        <td>'hover focus'</td>
-        <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
-      </tr>
-      <tr>
-        <td>offset</td>
-        <td>string</td>
-        <td>'0 0'</td>
-        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 100px;">Name</th>
+      <th style="width: 100px;">Type</th>
+      <th style="width: 50px;">Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>animation</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Apply a CSS fade transition to the popover</td>
+    </tr>
+    <tr>
+      <td>container</td>
+      <td>string | false</td>
+      <td>false</td>
+      <td>
+        <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>content</td>
+      <td>string | element | function</td>
+      <td>''</td>
+      <td>
+        <p>Default content value if <code>data-content</code> attribute isn't present.</p>
+        <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>delay</td>
+      <td>number | object</td>
+      <td>0</td>
+      <td>
+       <p>Delay showing and hiding the popover (ms) - does not apply to manual trigger type</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>
+    </tr>
+    <tr>
+      <td>html</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>Insert HTML into the popover. If false, jQuery's <code>text</code> method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.</td>
+    </tr>
+    <tr>
+      <td>placement</td>
+      <td>string | function</td>
+      <td>'right'</td>
+      <td>
+        <p>How to position the popover - top | bottom | left | right.</p>
+        <p>When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the popover instance.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>selector</td>
+      <td>string</td>
+      <td>false</td>
+      <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+    </tr>
+    <tr>
+      <td>template</td>
+      <td>string</td>
+      <td><code>'&lt;div class="popover" role="tooltip"&gt;&lt;div class="popover-arrow"&gt;&lt;/div&gt;&lt;h3 class="popover-title"&gt;&lt;/h3&gt;&lt;div class="popover-content"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+      <td>
+        <p>Base HTML to use when creating the popover.</p>
+        <p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
+        <p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
+        <p><code>.popover-arrow</code> will become the popover's arrow.</p>
+        <p>The outermost wrapper element should have the <code>.popover</code> class.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>title</td>
+      <td>string | element | function</td>
+      <td>''</td>
+      <td>
+        <p>Default title value if <code>title</code> attribute isn't present.</p>
+        <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>trigger</td>
+      <td>string</td>
+      <td>'click'</td>
+      <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
+    </tr>
+    <tr>
+      <td>constraints</td>
+      <td>Array</td>
+      <td>'hover focus'</td>
+      <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
+    </tr>
+    <tr>
+      <td>offset</td>
+      <td>string</td>
+      <td>'0 0'</td>
+      <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#offset">offset docs</a>.</td>
+    </tr>
+  </tbody>
+</table>
 
 {% callout info %}
 #### Data attributes for individual popovers
@@ -310,34 +308,32 @@ Hides and destroys an element's popover. Popovers that use delegation (which are
 
 ### Events
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-        <th style="width: 150px;">Event Type</th>
-        <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.bs.popover</td>
-        <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-      </tr>
-      <tr>
-        <td>shown.bs.popover</td>
-        <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
-      </tr>
-      <tr>
-        <td>hide.bs.popover</td>
-        <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-      </tr>
-      <tr>
-        <td>hidden.bs.popover</td>
-        <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+      <th style="width: 150px;">Event Type</th>
+      <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>show.bs.popover</td>
+      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+    </tr>
+    <tr>
+      <td>shown.bs.popover</td>
+      <td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
+    </tr>
+    <tr>
+      <td>hide.bs.popover</td>
+      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+    </tr>
+    <tr>
+      <td>hidden.bs.popover</td>
+      <td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+    </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myPopover').on('hidden.bs.popover', function () {
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index 74829267e..a1f04ad9c 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -117,45 +117,42 @@ $('[data-spy="scroll"]').each(function () {
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-offset=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 100px;">Name</th>
-       <th style="width: 100px;">Type</th>
-       <th style="width: 50px;">Default</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>offset</td>
-       <td>number</td>
-       <td>10</td>
-       <td>Pixels to offset from top when calculating position of scroll.</td>
-     </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 100px;">Name</th>
+     <th style="width: 100px;">Type</th>
+     <th style="width: 50px;">Default</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>offset</td>
+     <td>number</td>
+     <td>10</td>
+     <td>Pixels to offset from top when calculating position of scroll.</td>
+   </tr>
+  </tbody>
+</table>
 
 ### Events
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-     <tr>
-       <th style="width: 150px;">Event Type</th>
-       <th>Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-       <td>activate.bs.scrollspy</td>
-       <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
-    </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+   <tr>
+     <th style="width: 150px;">Event Type</th>
+     <th>Description</th>
+   </tr>
+  </thead>
+  <tbody>
+   <tr>
+     <td>activate.bs.scrollspy</td>
+     <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
+  </tr>
+  </tbody>
+</table>
+
 {% highlight js %}
 $('#myScrollspy').on('activate.bs.scrollspy', function () {
   // do something…
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 31fb2c1c7..deb84b778 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -146,107 +146,105 @@ You should only add tooltips to HTML elements that are traditionally keyboard-fo
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 100px;">Name</th>
-        <th style="width: 100px;">Type</th>
-        <th style="width: 50px;">Default</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>animation</td>
-        <td>boolean</td>
-        <td>true</td>
-        <td>Apply a CSS fade transition to the tooltip</td>
-      </tr>
-      <tr>
-        <td>container</td>
-        <td>string | element | false</td>
-        <td>false</td>
-        <td>
-          <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
-       </td>
-      </tr>
-      <tr>
-        <td>delay</td>
-        <td>number | object</td>
-        <td>0</td>
-        <td>
-         <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</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>
-      </tr>
-      <tr>
-        <td>html</td>
-        <td>boolean</td>
-        <td>false</td>
-        <td>
-          <p>Allow HTML in the tooltip.</p>
-          <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
-          <p>Use text if you're worried about XSS attacks.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>placement</td>
-        <td>string | function</td>
-        <td>'top'</td>
-        <td>
-          <p>How to position the tooltip - top | bottom | left | right.</p>
-          <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>selector</td>
-        <td>string</td>
-        <td>false</td>
-        <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
-      </tr>
-      <tr>
-        <td>template</td>
-        <td>string</td>
-        <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
-        <td>
-          <p>Base HTML to use when creating the tooltip.</p>
-          <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
-          <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
-          <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>title</td>
-        <td>string | element | function</td>
-        <td>''</td>
-        <td>
-          <p>Default title value if <code>title</code> attribute isn't present.</p>
-          <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
-        </td>
-      </tr>
-      <tr>
-        <td>trigger</td>
-        <td>string</td>
-        <td>'hover focus'</td>
-        <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
-      </tr>
-      <tr>
-        <td>constraints</td>
-        <td>Array</td>
-        <td>[]</td>
-        <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
-      </tr>
-      <tr>
-        <td>offset</td>
-        <td>string</td>
-        <td>'0 0'</td>
-        <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 100px;">Name</th>
+      <th style="width: 100px;">Type</th>
+      <th style="width: 50px;">Default</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>animation</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Apply a CSS fade transition to the tooltip</td>
+    </tr>
+    <tr>
+      <td>container</td>
+      <td>string | element | false</td>
+      <td>false</td>
+      <td>
+        <p>Appends the tooltip to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.</p>
+     </td>
+    </tr>
+    <tr>
+      <td>delay</td>
+      <td>number | object</td>
+      <td>0</td>
+      <td>
+       <p>Delay showing and hiding the tooltip (ms) - does not apply to manual trigger type</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>
+    </tr>
+    <tr>
+      <td>html</td>
+      <td>boolean</td>
+      <td>false</td>
+      <td>
+        <p>Allow HTML in the tooltip.</p>
+        <p>If true, HTML tags in the tooltip's <code>title</code> will be rendered in the tooltip. If false, jQuery's <code>text</code> method will be used to insert content into the DOM.</p>
+        <p>Use text if you're worried about XSS attacks.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>placement</td>
+      <td>string | function</td>
+      <td>'top'</td>
+      <td>
+        <p>How to position the tooltip - top | bottom | left | right.</p>
+        <p>When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The <code>this</code> context is set to the tooltip instance.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>selector</td>
+      <td>string</td>
+      <td>false</td>
+      <td>If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See <a href="https://github.com/twbs/bootstrap/issues/4215">this</a> and <a href="https://jsbin.com/zopod/1/edit">an informative example</a>.</td>
+    </tr>
+    <tr>
+      <td>template</td>
+      <td>string</td>
+      <td><code>'&lt;div class="tooltip" role="tooltip"&gt;&lt;div class="tooltip-arrow"&gt;&lt;/div&gt;&lt;div class="tooltip-inner"&gt;&lt;/div&gt;&lt;/div&gt;'</code></td>
+      <td>
+        <p>Base HTML to use when creating the tooltip.</p>
+        <p>The tooltip's <code>title</code> will be injected into the <code>.tooltip-inner</code>.</p>
+        <p><code>.tooltip-arrow</code> will become the tooltip's arrow.</p>
+        <p>The outermost wrapper element should have the <code>.tooltip</code> class.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>title</td>
+      <td>string | element | function</td>
+      <td>''</td>
+      <td>
+        <p>Default title value if <code>title</code> attribute isn't present.</p>
+        <p>If a function is given, it will be called with its <code>this</code> reference set to the element that the tooltip is attached to.</p>
+      </td>
+    </tr>
+    <tr>
+      <td>trigger</td>
+      <td>string</td>
+      <td>'hover focus'</td>
+      <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
+    </tr>
+    <tr>
+      <td>constraints</td>
+      <td>Array</td>
+      <td>[]</td>
+      <td>An array of constraints - passed through to Tether. For more information refer to Tether's <a href="http://tether.io/#constraints">constraint docs</a>.</td>
+    </tr>
+    <tr>
+      <td>offset</td>
+      <td>string</td>
+      <td>'0 0'</td>
+      <td>Offset of the popover relative to its target. For more information refer to Tether's <a href="http://tether.io/#constraints">offset docs</a>.</td>
+    </tr>
+  </tbody>
+</table>
 
 {% callout info %}
 #### Data attributes for individual tooltips
@@ -286,34 +284,32 @@ Hides and destroys an element's tooltip. Tooltips that use delegation (which are
 
 ### Events
 
-<div class="table-responsive">
-  <table class="table table-bordered table-striped">
-    <thead>
-      <tr>
-        <th style="width: 150px;">Event Type</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr>
-        <td>show.bs.tooltip</td>
-        <td>This event fires immediately when the <code>show</code> instance method is called.</td>
-      </tr>
-      <tr>
-        <td>shown.bs.tooltip</td>
-        <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
-      </tr>
-      <tr>
-        <td>hide.bs.tooltip</td>
-        <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
-      </tr>
-      <tr>
-        <td>hidden.bs.tooltip</td>
-        <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+<table class="table table-bordered table-striped table-responsive">
+  <thead>
+    <tr>
+      <th style="width: 150px;">Event Type</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>show.bs.tooltip</td>
+      <td>This event fires immediately when the <code>show</code> instance method is called.</td>
+    </tr>
+    <tr>
+      <td>shown.bs.tooltip</td>
+      <td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
+    </tr>
+    <tr>
+      <td>hide.bs.tooltip</td>
+      <td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
+    </tr>
+    <tr>
+      <td>hidden.bs.tooltip</td>
+      <td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
+    </tr>
+  </tbody>
+</table>
 
 {% highlight js %}
 $('#myTooltip').on('hidden.bs.tooltip', function () {