fixes #5055: wrap legend and form elements in fieldset so IE8 styles the legend properly

docs/base-css.html

@@ -875,6 +875,7 @@ For example, <code><section></code> should be wrapped as inlin
           <h2>Default styles</h2>
           <p>Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p>
           <form class="bs-docs-example">
+            <fieldset>
               <legend>Legend</legend>
               <label>Label name</label>
               <input type="text" placeholder="Type something…">
@@ -883,9 +884,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                 <input type="checkbox"> Check me out
               </label>
               <button type="submit" class="btn">Submit</button>
+            </fieldset>
           </form>
 <pre class="prettyprint linenums">
 &lt;form&gt;
+  &lt;fieldset&gt;
     &lt;legend&gt;Legend&lt;/legend&gt;
     &lt;label&gt;Label name&lt;/label&gt;
     &lt;input type="text" placeholder="Type something…"&gt;
@@ -894,6 +897,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
       &lt;input type="checkbox"&gt; Check me out
     &lt;/label&gt;
     &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
+  &lt;/fieldset&gt;
 &lt;/form&gt;
 </pre>
 
@@ -947,7 +951,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
             <li>Wrap any associated controls in <code>.controls</code> for proper alignment</li>
           </ul>
           <form class="bs-docs-example form-horizontal">
-            <legend>Legend</legend>
             <div class="control-group">
               <label class="control-label" for="inputEmail">Email</label>
               <div class="controls">

docs/templates/pages/base-css.mustache

@@ -812,6 +812,7 @@
           <h2>{{_i}}Default styles{{/i}}</h2>
           <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code>&lt;form&gt;</code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p>
           <form class="bs-docs-example">
+            <fieldset>
               <legend>Legend</legend>
               <label>{{_i}}Label name{{/i}}</label>
               <input type="text" placeholder="{{_i}}Type something…{{/i}}">
@@ -820,9 +821,11 @@
                 <input type="checkbox"> {{_i}}Check me out{{/i}}
               </label>
               <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
+            </fieldset>
           </form>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form&gt;
+  &lt;fieldset&gt;
     &lt;legend&gt;{{_i}}Legend{{/i}}&lt;/legend&gt;
     &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
     &lt;input type="text" placeholder="{{_i}}Type something…{{/i}}"&gt;
@@ -831,6 +834,7 @@
       &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
     &lt;/label&gt;
     &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
+  &lt;/fieldset&gt;
 &lt;/form&gt;
 </pre>
 
@@ -884,7 +888,6 @@
             <li>{{_i}}Wrap any associated controls in <code>.controls</code> for proper alignment{{/i}}</li>
           </ul>
           <form class="bs-docs-example form-horizontal">
-            <legend>Legend</legend>
             <div class="control-group">
               <label class="control-label" for="inputEmail">{{_i}}Email{{/i}}</label>
               <div class="controls">