Documentation cleanup (inc. use of <input ... readonly> for static form controls example)

* Fix incorrect code indentation
* Remove unnecessary vendor prefix for `box-sizing` - all modern browsers now support this unprefixed
* Remove incorrect `<label>` and change static controls to readonly inputs
* Allow `<img>` elements without `src` to allow for `holder.js` images used in the docs, which lack `src` and use `data-src` instead

9 files changed, 185 insertions, 187 deletions

diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index ab84bf460..af00dc526 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -186,45 +186,45 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 <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>
+    <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 | boolean</td>
-     <td>"hover"</td>
-     <td><p>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>false</code>, hovering over the carousel won't pause it.</p>
-     <p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></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>
+    <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 | boolean</td>
+      <td>"hover"</td>
+      <td><p>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>false</code>, hovering over the carousel won't pause it.</p>
+      <p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></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>
 
@@ -276,20 +276,20 @@ All carousel events are fired at the carousel itself (i.e. at the `<div class="c
 
 <table class="table table-bordered table-striped table-responsive">
   <thead>
-   <tr>
-     <th style="width: 150px;">Event Type</th>
-     <th>Description</th>
-   </tr>
+    <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>
+    <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>
 
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index a86678ad1..65b8171bd 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -153,26 +153,26 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 <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>
+    <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>card</code> class). The attribute has to be set on the target collapsible area.</td>
-   </tr>
-   <tr>
-     <td>toggle</td>
-     <td>boolean</td>
-     <td>true</td>
-     <td>Toggles the collapsible element on invocation</td>
-   </tr>
+    <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>card</code> class). The attribute has to be set on the target collapsible area.</td>
+    </tr>
+    <tr>
+      <td>toggle</td>
+      <td>boolean</td>
+      <td>true</td>
+      <td>Toggles the collapsible element on invocation</td>
+    </tr>
   </tbody>
 </table>
 
@@ -209,30 +209,28 @@ Bootstrap's collapse class exposes a few events for hooking into collapse functi
 
 <table class="table table-bordered table-striped table-responsive">
   <thead>
-   <tr>
-     <th style="width: 150px;">Event Type</th>
-     <th>Description</th>
-   </tr>
+    <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>
+    <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>
 
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 44cb1ed0d..52230fa54 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -376,7 +376,7 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall
       </div>
     </fieldset>
     <div class="form-group row">
-      <label class="col-sm-2">Checkbox</label>
+      <div class="col-sm-2">Checkbox</div>
       <div class="col-sm-10">
         <div class="form-check">
           <label class="form-check-label">
@@ -569,14 +569,14 @@ Should you have no text within the `<label>`, the input is positioned as you'd e
 
 ## Static controls
 
-When you need to place plain text next to a form label within a form, use the `.form-control-static` class on an element of your choice.
+If you want to have read-only fields in your form styled as plain text, use the `.form-control-static` class to remove the default form field styling and preserve the correct margin and padding.
 
 {% example html %}
 <form>
   <div class="form-group row">
-    <label class="col-sm-2 col-form-label">Email</label>
+    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
     <div class="col-sm-10">
-      <p class="form-control-static">[email protected]</p>
+      <input type="text" readonly class="form-control-static" id="staticEmail" value="[email protected]">
     </div>
   </div>
   <div class="form-group row">
@@ -591,8 +591,8 @@ When you need to place plain text next to a form label within a form, use the `.
 {% example html %}
 <form class="form-inline">
   <div class="form-group">
-    <label class="sr-only">Email</label>
-    <p class="form-control-static">[email protected]</p>
+    <label for="staticEmail2" class="sr-only">Email</label>
+    <input type="text" readonly class="form-control-static" id="staticEmail2" value="[email protected]">
   </div>
   <div class="form-group mx-sm-3">
     <label for="inputPassword2" class="sr-only">Password</label>
@@ -604,7 +604,7 @@ When you need to place plain text next to a form label within a form, use the `.
 
 ## Disabled states
 
-Add the `disabled` boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a `not-allowed` cursor.
+Add the `disabled` boolean attribute on an input to prevent user interactions and make it appear lighter.
 
 {% highlight html %}
 <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index fcaa364fb..dcf605aee 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -328,17 +328,17 @@ If no tab was already active, the `hide.bs.tab` and `hidden.bs.tab` events will
 
 <table class="table table-bordered table-striped table-responsive">
   <thead>
-   <tr>
-     <th style="width: 150px;">Event type</th>
-     <th>Description</th>
-   </tr>
+    <tr>
+      <th style="width: 150px;">Event type</th>
+      <th>Description</th>
+    </tr>
   </thead>
   <tbody>
     <tr>
       <td>show.bs.tab</td>
       <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-   </tr>
-   <tr>
+    </tr>
+    <tr>
       <td>shown.bs.tab</td>
       <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
     </tr>
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 19254b880..a2f4471d3 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -510,38 +510,38 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 <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>
+    <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>
+    <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>
 
@@ -590,28 +590,28 @@ Bootstrap's modal class exposes a few events for hooking into modal functionalit
 
 <table class="table table-bordered table-striped table-responsive">
   <thead>
-   <tr>
-     <th style="width: 150px;">Event Type</th>
-     <th>Description</th>
-   </tr>
+    <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>
+    <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>
 
diff --git a/docs/components/navs.md b/docs/components/navs.md
index 9ab2535ed..e92906229 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -636,17 +636,17 @@ If no tab was already active, then the `hide.bs.tab` and `hidden.bs.tab` events
 
 <table class="table table-bordered table-striped table-responsive">
   <thead>
-   <tr>
-     <th style="width: 150px;">Event Type</th>
-     <th>Description</th>
-   </tr>
+    <tr>
+      <th style="width: 150px;">Event Type</th>
+      <th>Description</th>
+    </tr>
   </thead>
   <tbody>
     <tr>
       <td>show.bs.tab</td>
       <td>This event fires on tab show, but before the new tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
-   </tr>
-   <tr>
+    </tr>
+    <tr>
       <td>shown.bs.tab</td>
       <td>This event fires on tab show after a tab has been shown. Use <code>event.target</code> and <code>event.relatedTarget</code> to target the active tab and the previous active tab (if available) respectively.</td>
     </tr>
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index cc1b0fe2e..307b4cb6d 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -201,9 +201,9 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <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>
+        <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>
@@ -331,10 +331,10 @@ Toggles the ability for an element's popover to be shown or hidden.
 
 <table class="table table-bordered table-striped table-responsive">
   <thead>
-   <tr>
+    <tr>
       <th style="width: 150px;">Event Type</th>
       <th>Description</th>
-   </tr>
+    </tr>
   </thead>
   <tbody>
     <tr>
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index ecabd51c5..80c057161 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -292,20 +292,20 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 <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>
+    <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>
+    <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>
 
@@ -313,16 +313,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
 
 <table class="table table-bordered table-striped table-responsive">
   <thead>
-   <tr>
-     <th style="width: 150px;">Event Type</th>
-     <th>Description</th>
-   </tr>
+    <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>
+    <tr>
+      <td>activate.bs.scrollspy</td>
+      <td>This event fires whenever a new item becomes activated by the scrollspy.</td>
+    </tr>
   </tbody>
 </table>
 
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index 7c7f9af8b..55de9a886 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -168,16 +168,16 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
       <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>
+      </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>
+        <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>