From 12b738bf302699a51721d030465e07f76de72bf9 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Wed, 26 Dec 2012 14:13:44 -0600
Subject: [PATCH] Add grid column example to form input sizing

---
 docs/css.html                     | 28 +++++++++++++++++++++++++++-
 docs/templates/pages/css.mustache | 28 +++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/docs/css.html b/docs/css.html
index db7cb17e2a..b23119f8d2 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1538,7 +1538,33 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
   ...
 &lt;/select&gt;
 </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 93e3e269d7..31d0b6c2e8 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1478,7 +1478,33 @@ For example, &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; should be wrapped
   ...
 &lt;/select&gt;
 </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>