Update forms docs to add more headings and move the huge type example into a table

diff --git a/docs/components/forms.md b/docs/components/forms.md
index 51d9e8f908dd52e8fa52c67f7b50e5107c90e160..d71615976a72fd7de08695a6a1c01f2058314c77 100644 (file)
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -18,6 +18,8 @@ Bootstrap's form controls expand on [our Rebooted form styles]({{ site.baseurl }
 
 Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for email address or `number` for numerical information).
 
+### Example
+
 {% example html %}
 <form>
   <div class="form-group">
@@ -89,6 +91,8 @@ Be sure to use an appropriate `type` attribute on all inputs (e.g., `email` for
 </form>
 {% endexample %}
 
+### Supported controls
+
 Below is a complete list of the specific form controls supported by Bootstrap and the classes that customize them. Additional documentation is available for each group.
 
 <table>
@@ -167,88 +171,23 @@ Below is a complete list of the specific form controls supported by Bootstrap an
 
 ### Textual inputs
 
-Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type`.
-
-{% example html %}
-<div class="form-group row">
-  <label for="example-text-input" class="col-2 col-form-label">Text</label>
-  <div class="col-10">
-    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-search-input" class="col-2 col-form-label">Search</label>
-  <div class="col-10">
-    <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-email-input" class="col-2 col-form-label">Email</label>
-  <div class="col-10">
-    <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-url-input" class="col-2 col-form-label">URL</label>
-  <div class="col-10">
-    <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-tel-input" class="col-2 col-form-label">Telephone</label>
-  <div class="col-10">
-    <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-password-input" class="col-2 col-form-label">Password</label>
-  <div class="col-10">
-    <input class="form-control" type="password" value="hunter2" id="example-password-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-number-input" class="col-2 col-form-label">Number</label>
-  <div class="col-10">
-    <input class="form-control" type="number" value="42" id="example-number-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-datetime-local-input" class="col-2 col-form-label">Date and time</label>
-  <div class="col-10">
-    <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-date-input" class="col-2 col-form-label">Date</label>
-  <div class="col-10">
-    <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-month-input" class="col-2 col-form-label">Month</label>
-  <div class="col-10">
-    <input class="form-control" type="month" value="2011-08" id="example-month-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-week-input" class="col-2 col-form-label">Week</label>
-  <div class="col-10">
-    <input class="form-control" type="week" value="2011-W33" id="example-week-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-time-input" class="col-2 col-form-label">Time</label>
-  <div class="col-10">
-    <input class="form-control" type="time" value="13:45:00" id="example-time-input">
-  </div>
-</div>
-<div class="form-group row">
-  <label for="example-color-input" class="col-2 col-form-label">Color</label>
-  <div class="col-10">
-    <input class="form-control" type="color" value="#563d7c" id="example-color-input">
-  </div>
-</div>
-{% endexample %}
+Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type` (meaning, almost everything except the file, checkbox, and radio inputs).
+
+| Type | Example |
+| --- | --- |
+| `text` | <input class="form-control" type="text" value="Artisanal kale" id="example-text-input"> |
+| `search` | <input class="form-control" type="search" value="How do I shoot web" id="example-search-input"> |
+| `email` | <input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input"> |
+| `url` | <input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input"> |
+| `tel` | <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input"> |
+| `password` | <input class="form-control" type="password" value="hunter2" id="example-password-input"> |
+| `number` | <input class="form-control" type="number" value="42" id="example-number-input"> |
+| `datetime-local` | <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input"> |
+| `date` | <input class="form-control" type="date" value="2011-08-19" id="example-date-input"> |
+| `month` | <input class="form-control" type="month" value="2011-08" id="example-month-input"> |
+| `week` | <input class="form-control" type="week" value="2011-W33" id="example-week-input"> |
+| `time` | <input class="form-control" type="time" value="13:45:00" id="example-time-input"> |
+| `color` | <input class="form-control" type="color" value="#563d7c" id="example-color-input"> |
 
 ## Form layouts