Add grid column example to form input sizing

diff --git a/docs/css.html b/docs/css.html
index db7cb17e2a85be76ec7c39fb5165f774461315d4..b23119f8d205b130b799ebb998f2b751e0df18de 100644 (file)
--- a/docs/css.html
+++ b/docs/css.html
@@ -1538,7 +1538,33 @@ For example, <code><section></code> should be wrapped
   ...
 </select>
 </pre>
-          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with `.row` and `.span*` classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+          <form class="bs-docs-example" style="padding-bottom: 15px;">
+            <div class="row">
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
 
           <h3>Uneditable inputs</h3>
           <p>Present data in a form that's not editable without using actual form markup.</p>

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 93e3e269d7f57dacb9bc35a53b5fb1cb0eecfcab..31d0b6c2e8338d7e864ee5537aa7bfdbfbf1bd95 100644 (file)
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1478,7 +1478,33 @@ For example, <code><section></code> should be wrapped
   ...
 </select>
 </pre>
-          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with `.row` and `.span*` classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+          <p>If you need multiple inputs on the same line, wrap them in the standard grid markup (with <code>.row</code> and <code>.span*</code> classes). Each input should have it's own column and will expand to fill the available width automatically.</p>
+          <form class="bs-docs-example" style="padding-bottom: 15px;">
+            <div class="row">
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+              <div class="span4">
+                <input type="text" placeholder=".span4">
+              </div>
+            </div>
+          </form>
+<pre class="prettyprint linenums">
+&lt;div class="row"&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+  &lt;div class="span4"&gt;
+    &lt;input type="text" placeholder=".span4"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
 
           <h3>Uneditable inputs</h3>
           <p>Present data in a form that's not editable without using actual form markup.</p>