markdownify input group

1 files changed, 100 insertions, 218 deletions

diff --git a/docs/components/input-group.md b/docs/components/input-group.md
index 199c21644..5edbc8ced 100644
--- a/docs/components/input-group.md
+++ b/docs/components/input-group.md
@@ -3,123 +3,73 @@ layout: page
 title: Input group
 ---
 
-<div class="bs-docs-section">
-  <h1 id="input-groups" class="page-header">Input groups</h1>
+Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use `.input-group` with an `.input-group-addon` to prepend or append elements to a single `.form-control`.
 
-  <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p>
+<div class="bs-callout bs-callout-danger">
+  <h4>Cross-browser compatibility</h4>
+  <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+  <h4>Tooltips &amp; popovers in input groups require special setting</h4>
+  <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
+</div>
+<div class="bs-callout bs-callout-warning">
+  <h4>Don't mix with other components</h4>
+  <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
+</div>
 
-  <div class="bs-callout bs-callout-danger">
-    <h4>Cross-browser compatibility</h4>
-    <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
-  </div>
-  <div class="bs-callout bs-callout-warning">
-    <h4>Tooltips &amp; popovers in input groups require special setting</h4>
-    <p>When using tooltips or popovers on elements within an <code>.input-group</code>, you'll have to specify the option <code>container: 'body'</code> to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).</p>
-  </div>
-  <div class="bs-callout bs-callout-warning">
-    <h4>Don't mix with other components</h4>
-    <p>Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.</p>
-  </div>
+## Basic example
 
+Place one add-on or button on either side of an input. You may also place one on both sides of an input.
 
-  <h2 id="input-groups-basic">Basic example</h2>
-  <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
-  <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
-  <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
-  <form class="bs-example bs-example-form" role="form">
-    <div class="input-group">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
-    </div>
-    <br>
-    <div class="input-group">
-      <input type="text" class="form-control">
-      <span class="input-group-addon">.00</span>
-    </div>
-    <br>
-    <div class="input-group">
-      <span class="input-group-addon">$</span>
-      <input type="text" class="form-control">
-      <span class="input-group-addon">.00</span>
-    </div>
-  </form>
-{% highlight html %}
+**We do not support multiple add-ons on a single side.**
+
+**We do not support multiple form-controls in a single input group.**
+
+{% example html %}
 <div class="input-group">
   <span class="input-group-addon">@</span>
   <input type="text" class="form-control" placeholder="Username">
 </div>
-
+<br>
 <div class="input-group">
   <input type="text" class="form-control">
   <span class="input-group-addon">.00</span>
 </div>
-
+<br>
 <div class="input-group">
   <span class="input-group-addon">$</span>
   <input type="text" class="form-control">
   <span class="input-group-addon">.00</span>
 </div>
-{% endhighlight %}
+{% endexample %}
 
-  <h2 id="input-groups-sizing">Sizing</h2>
-  <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
-  <form class="bs-example bs-example-form" role="form">
-    <div class="input-group input-group-lg">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
-    </div>
-    <br>
-    <div class="input-group">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
-    </div>
-    <br>
-    <div class="input-group input-group-sm">
-      <span class="input-group-addon">@</span>
-      <input type="text" class="form-control" placeholder="Username">
-    </div>
-  </form>
-{% highlight html %}
+## Sizing
+
+Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+
+{% example html %}
 <div class="input-group input-group-lg">
   <span class="input-group-addon">@</span>
   <input type="text" class="form-control" placeholder="Username">
 </div>
-
+<br>
 <div class="input-group">
   <span class="input-group-addon">@</span>
   <input type="text" class="form-control" placeholder="Username">
 </div>
-
+<br>
 <div class="input-group input-group-sm">
   <span class="input-group-addon">@</span>
   <input type="text" class="form-control" placeholder="Username">
 </div>
-{% endhighlight %}
+{% endexample %}
+
+## Checkboxes and radio addons
 
+Place any checkbox or radio option within an input group's addon instead of text.
 
-  <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2>
-  <p>Place any checkbox or radio option within an input group's addon instead of text.</p>
-  <form class="bs-example bs-example-form">
-    <div class="row">
-      <div class="col-lg-6">
-        <div class="input-group">
-          <span class="input-group-addon">
-            <input type="checkbox">
-          </span>
-          <input type="text" class="form-control">
-        </div><!-- /input-group -->
-      </div><!-- /.col-lg-6 -->
-      <div class="col-lg-6">
-        <div class="input-group">
-          <span class="input-group-addon">
-            <input type="radio">
-          </span>
-          <input type="text" class="form-control">
-        </div><!-- /input-group -->
-      </div><!-- /.col-lg-6 -->
-    </div><!-- /.row -->
-  </form>
-{% highlight html %}
+{% example html %}
 <div class="row">
   <div class="col-lg-6">
     <div class="input-group">
@@ -127,43 +77,24 @@ title: Input group
         <input type="checkbox">
       </span>
       <input type="text" class="form-control">
-    </div><!-- /input-group -->
-  </div><!-- /.col-lg-6 -->
+    </div>
+  </div>
   <div class="col-lg-6">
     <div class="input-group">
       <span class="input-group-addon">
         <input type="radio">
       </span>
       <input type="text" class="form-control">
-    </div><!-- /input-group -->
-  </div><!-- /.col-lg-6 -->
-</div><!-- /.row -->
-{% endhighlight %}
+    </div>
+  </div>
+</div>
+{% endexample %}
 
+## Button addons
 
-  <h2 id="input-groups-buttons">Button addons</h2>
-  <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
-  <form class="bs-example bs-example-form">
-    <div class="row">
-      <div class="col-lg-6">
-        <div class="input-group">
-          <span class="input-group-btn">
-            <button class="btn btn-secondary" type="button">Go!</button>
-          </span>
-          <input type="text" class="form-control">
-        </div><!-- /input-group -->
-      </div><!-- /.col-lg-6 -->
-      <div class="col-lg-6">
-        <div class="input-group">
-          <input type="text" class="form-control">
-          <span class="input-group-btn">
-            <button class="btn btn-secondary" type="button">Go!</button>
-          </span>
-        </div><!-- /input-group -->
-      </div><!-- /.col-lg-6 -->
-    </div><!-- /.row -->
-  </form>
-{% highlight html %}
+Buttons in input groups are a bit different and require one extra level of nesting. Instead of `.input-group-addon`, you'll need to use `.input-group-btn` to wrap the buttons. This is required due to default browser styles that cannot be overridden.
+
+{% example html %}
 <div class="row">
   <div class="col-lg-6">
     <div class="input-group">
@@ -171,56 +102,22 @@ title: Input group
         <button class="btn btn-secondary" type="button">Go!</button>
       </span>
       <input type="text" class="form-control">
-    </div><!-- /input-group -->
-  </div><!-- /.col-lg-6 -->
+    </div>
+  </div>
   <div class="col-lg-6">
     <div class="input-group">
       <input type="text" class="form-control">
       <span class="input-group-btn">
         <button class="btn btn-secondary" type="button">Go!</button>
       </span>
-    </div><!-- /input-group -->
-  </div><!-- /.col-lg-6 -->
-</div><!-- /.row -->
-{% endhighlight %}
+    </div>
+  </div>
+</div>
+{% endexample %}
 
-  <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
-  <p></p>
-  <form class="bs-example bs-example-form" role="form">
-    <div class="row">
-      <div class="col-lg-6">
-        <div class="input-group">
-          <div class="input-group-btn">
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
-            <ul class="dropdown-menu" role="menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-          <input type="text" class="form-control">
-        </div><!-- /input-group -->
-      </div><!-- /.col-lg-6 -->
-      <div class="col-lg-6">
-        <div class="input-group">
-          <input type="text" class="form-control">
-          <div class="input-group-btn">
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Action</button>
-            <ul class="dropdown-menu dropdown-menu-right" role="menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </div><!-- /btn-group -->
-        </div><!-- /input-group -->
-      </div><!-- /.col-lg-6 -->
-    </div><!-- /.row -->
-  </form>
-{% highlight html %}
+## Buttons with dropdowns
+
+{% example html %}
 <div class="row">
   <div class="col-lg-6">
     <div class="input-group">
@@ -233,10 +130,10 @@ title: Input group
           <li class="divider"></li>
           <li><a href="#">Separated link</a></li>
         </ul>
-      </div><!-- /btn-group -->
+      </div>
       <input type="text" class="form-control">
-    </div><!-- /input-group -->
-  </div><!-- /.col-lg-6 -->
+    </div>
+  </div>
   <div class="col-lg-6">
     <div class="input-group">
       <input type="text" class="form-control">
@@ -249,66 +146,51 @@ title: Input group
           <li class="divider"></li>
           <li><a href="#">Separated link</a></li>
         </ul>
-      </div><!-- /btn-group -->
-    </div><!-- /input-group -->
-  </div><!-- /.col-lg-6 -->
-</div><!-- /.row -->
-{% endhighlight %}
-
-  <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
-  <form class="bs-example bs-example-form" role="form">
-    <div class="row">
-      <div class="col-lg-6">
-        <div class="input-group">
-          <div class="input-group-btn">
-            <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-              <span class="sr-only">Toggle Dropdown</span>
-            </button>
-            <ul class="dropdown-menu" role="menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </div>
-          <input type="text" class="form-control">
-        </div><!-- /.input-group -->
-      </div><!-- /.col-lg-6 -->
-      <div class="col-lg-6">
-        <div class="input-group">
-          <input type="text" class="form-control">
-          <div class="input-group-btn">
-            <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
-              <span class="sr-only">Toggle Dropdown</span>
-            </button>
-            <ul class="dropdown-menu dropdown-menu-right" role="menu">
-              <li><a href="#">Action</a></li>
-              <li><a href="#">Another action</a></li>
-              <li><a href="#">Something else here</a></li>
-              <li class="divider"></li>
-              <li><a href="#">Separated link</a></li>
-            </ul>
-          </div>
-        </div><!-- /.input-group -->
-      </div><!-- /.col-lg-6 -->
-    </div><!-- /.row -->
-  </form>
-{% highlight html %}
-<div class="input-group">
-  <div class="input-group-btn">
-    <!-- Button and dropdown menu -->
+      </div>
+    </div>
   </div>
-  <input type="text" class="form-control">
 </div>
+{% endexample %}
 
-<div class="input-group">
-  <input type="text" class="form-control">
-  <div class="input-group-btn">
-    <!-- Button and dropdown menu -->
+## Segmented buttons
+
+{% example html %}
+<div class="row">
+  <div class="col-lg-6">
+    <div class="input-group">
+      <div class="input-group-btn">
+        <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+          <span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </div>
+      <input type="text" class="form-control">
+    </div>
+  </div>
+  <div class="col-lg-6">
+    <div class="input-group">
+      <input type="text" class="form-control">
+      <div class="input-group-btn">
+        <button type="button" class="btn btn-secondary" tabindex="-1">Action</button>
+        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+          <span class="sr-only">Toggle Dropdown</span>
+        </button>
+        <ul class="dropdown-menu dropdown-menu-right" role="menu">
+          <li><a href="#">Action</a></li>
+          <li><a href="#">Another action</a></li>
+          <li><a href="#">Something else here</a></li>
+          <li class="divider"></li>
+          <li><a href="#">Separated link</a></li>
+        </ul>
+      </div>
+    </div>
   </div>
 </div>
-{% endhighlight %}
-</div>
+{% endexample %}