more tests for form styles; includes lightening help text

1 files changed, 22 insertions, 14 deletions

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 8dda0cb20..4be10716c 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -825,16 +825,18 @@
           </div>
 
           <h2 id="forms-default">{{_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>
+          <p>{{_i}}Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.{{/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}}">
-              <span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span>
-              <label class="checkbox">
-                <input type="checkbox"> {{_i}}Check me out{{/i}}
-              </label>
+              <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p>
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox"> {{_i}}Check me out{{/i}}
+                </label>
+              </div>
               <button type="submit" class="btn">{{_i}}Submit{{/i}}</button>
             </fieldset>
           </form>{{! /example }}
@@ -845,9 +847,11 @@
     &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
     &lt;input type="text" placeholder="{{_i}}Type something…{{/i}}"&gt;
     &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
-    &lt;label class="checkbox"&gt;
-      &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
-    &lt;/label&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
+      &lt;/label&gt;
+    &lt;/div&gt;
     &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
   &lt;/fieldset&gt;
 &lt;/form&gt;
@@ -878,18 +882,22 @@
           <form class="bs-docs-example form-inline">
             <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}">
             <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}">
-            <label class="checkbox">
-              <input type="checkbox"> {{_i}}Remember me{{/i}}
-            </label>
+            <div class="checkbox">
+              <label>
+                <input type="checkbox"> {{_i}}Remember me{{/i}}
+              </label>
+            </div>
             <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button>
           </form>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form class="form-inline"&gt;
   &lt;input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"&gt;
   &lt;input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"&gt;
-  &lt;label class="checkbox"&gt;
-    &lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
-  &lt;/label&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
+      &lt;/label&gt;
+    &lt;/div&gt;
   &lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>