headway, cleanup, and tests

4 files changed, 269 insertions, 97 deletions

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 3f372560c..4de21bbf3 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -192,100 +192,174 @@
   .offset1 {
     margin-left: 8.333333333333332%;
   }
-  input[class*="span"]:first-child,
-  textarea[class*="span"]:first-child,
-  .uneditable-input[class*="span"]:first-child {
-    margin-left: 0;
-  }
-  input[class*="span"]:last-child,
-  textarea[class*="span"]:last-child,
-  .uneditable-input[class*="span"]:last-child {
-    margin-right: 0;
-  }
   input.span12,
   textarea.span12,
+  select.span12,
   .uneditable-input.span12 {
-    width: 99.97589305281613%;
+    width: 97.43589743589743%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span11,
   textarea.span11,
+  select.span11,
   .uneditable-input.span11 {
-    width: 91.64657754401344%;
+    width: 89.10256410256409%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span10,
   textarea.span10,
+  select.span10,
   .uneditable-input.span10 {
-    width: 83.31689677843524%;
+    width: 80.76923076923077%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span9,
   textarea.span9,
+  select.span9,
   .uneditable-input.span9 {
-    width: 74.98685075608152%;
+    width: 72.43589743589743%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span8,
   textarea.span8,
+  select.span8,
   .uneditable-input.span8 {
-    width: 66.6564394769523%;
+    width: 64.10256410256409%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span7,
   textarea.span7,
+  select.span7,
   .uneditable-input.span7 {
-    width: 58.325662941047554%;
+    width: 55.769230769230774%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span6,
   textarea.span6,
+  select.span6,
   .uneditable-input.span6 {
-    width: 49.994521148367305%;
+    width: 47.43589743589744%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span5,
   textarea.span5,
+  select.span5,
   .uneditable-input.span5 {
-    width: 41.663014098911525%;
+    width: 39.10256410256411%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span4,
   textarea.span4,
+  select.span4,
   .uneditable-input.span4 {
-    width: 33.33114179268025%;
+    width: 30.769230769230766%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span3,
   textarea.span3,
+  select.span3,
   .uneditable-input.span3 {
-    width: 24.998904229673464%;
+    width: 22.435897435897438%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span2,
   textarea.span2,
+  select.span2,
   .uneditable-input.span2 {
-    width: 16.66630140989115%;
+    width: 14.1025641025641%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
   input.span1,
   textarea.span1,
+  select.span1,
   .uneditable-input.span1 {
-    width: 8.333333333333332%;
+    width: 5.769230769230768%;
     margin-right: 1.282051282051282%;
     margin-left: 1.282051282051282%;
   }
+  input.offset12,
+  textarea.offset12,
+  select.offset12,
+  uneditable-input.offset12 {
+    margin-left: 101.28205128205128%;
+  }
+  input.offset11,
+  textarea.offset11,
+  select.offset11,
+  uneditable-input.offset11 {
+    margin-left: 92.94871794871794%;
+  }
+  input.offset10,
+  textarea.offset10,
+  select.offset10,
+  uneditable-input.offset10 {
+    margin-left: 84.61538461538463%;
+  }
+  input.offset9,
+  textarea.offset9,
+  select.offset9,
+  uneditable-input.offset9 {
+    margin-left: 76.28205128205128%;
+  }
+  input.offset8,
+  textarea.offset8,
+  select.offset8,
+  uneditable-input.offset8 {
+    margin-left: 67.94871794871794%;
+  }
+  input.offset7,
+  textarea.offset7,
+  select.offset7,
+  uneditable-input.offset7 {
+    margin-left: 59.61538461538462%;
+  }
+  input.offset6,
+  textarea.offset6,
+  select.offset6,
+  uneditable-input.offset6 {
+    margin-left: 51.282051282051285%;
+  }
+  input.offset5,
+  textarea.offset5,
+  select.offset5,
+  uneditable-input.offset5 {
+    margin-left: 42.948717948717956%;
+  }
+  input.offset4,
+  textarea.offset4,
+  select.offset4,
+  uneditable-input.offset4 {
+    margin-left: 34.61538461538461%;
+  }
+  input.offset3,
+  textarea.offset3,
+  select.offset3,
+  uneditable-input.offset3 {
+    margin-left: 26.28205128205128%;
+  }
+  input.offset2,
+  textarea.offset2,
+  select.offset2,
+  uneditable-input.offset2 {
+    margin-left: 17.948717948717945%;
+  }
+  input.offset1,
+  textarea.offset1,
+  select.offset1,
+  uneditable-input.offset1 {
+    margin-left: 9.615384615384613%;
+  }
   .thumbnails {
     margin-left: -30px;
   }
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 3bba084f3..49c45ca48 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -975,136 +975,211 @@ textarea::-webkit-input-placeholder {
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
-.uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"] {
-  xmargin-left: 0;
-  xfloat: none;
-}
-
-.input-append input[class*="span"],
-.input-append .uneditable-input[class*="span"],
-.input-prepend input[class*="span"],
-.input-prepend .uneditable-input[class*="span"],
-.row-fluid input[class*="span"],
-.row-fluid select[class*="span"],
-.row-fluid textarea[class*="span"],
-.row-fluid .uneditable-input[class*="span"],
-.row-fluid .input-prepend [class*="span"],
-.row-fluid .input-append [class*="span"] {
-  display: inline-block;
-}
-
-.controls-row input[class*="span"]:first-child,
-.controls-row textarea[class*="span"]:first-child,
-.controls-row .uneditable-input[class*="span"]:first-child {
-  margin-left: 0;
-}
-
-.controls-row input[class*="span"]:last-child,
-.controls-row textarea[class*="span"]:last-child,
-.controls-row .uneditable-input[class*="span"]:last-child {
+.uneditable-input[class*="span"] {
+  float: none;
   margin-right: 0;
+  margin-left: 0;
 }
 
 .controls-row input.span12,
 textarea.span12,
+select.span12,
 .uneditable-input.span12 {
-  width: 99.97510185604347%;
+  width: 97.87234042553192%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span11,
 textarea.span11,
+select.span11,
 .uneditable-input.span11 {
-  width: 91.64591821336955%;
+  width: 89.53900709219857%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span10,
 textarea.span10,
+select.span10,
 .uneditable-input.span10 {
-  width: 83.31635732609024%;
+  width: 81.20567375886526%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span9,
 textarea.span9,
+select.span9,
 .uneditable-input.span9 {
-  width: 74.98641919420552%;
+  width: 72.87234042553192%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span8,
 textarea.span8,
+select.span8,
 .uneditable-input.span8 {
-  width: 66.6561038177154%;
+  width: 64.53900709219857%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span7,
 textarea.span7,
+select.span7,
 .uneditable-input.span7 {
-  width: 58.32541119661988%;
+  width: 56.20567375886525%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span6,
 textarea.span6,
+select.span6,
 .uneditable-input.span6 {
-  width: 49.99434133091897%;
+  width: 47.87234042553192%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span5,
 textarea.span5,
+select.span5,
 .uneditable-input.span5 {
-  width: 41.66289422061264%;
+  width: 39.53900709219859%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span4,
 textarea.span4,
+select.span4,
 .uneditable-input.span4 {
-  width: 33.33106986570092%;
+  width: 31.205673758865245%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span3,
 textarea.span3,
+select.span3,
 .uneditable-input.span3 {
-  width: 24.998868266183795%;
+  width: 22.872340425531917%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span2,
 textarea.span2,
+select.span2,
 .uneditable-input.span2 {
-  width: 16.666289422061265%;
+  width: 14.53900709219858%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
 .controls-row input.span1,
 textarea.span1,
+select.span1,
 .uneditable-input.span1 {
-  width: 8.333333333333332%;
+  width: 6.205673758865247%;
   margin-right: 1.0638297872340425%;
   margin-left: 1.0638297872340425%;
 }
 
+.controls-row input.offset12,
+textarea.offset12,
+select.offset12,
+uneditable-input.offset12 {
+  margin-left: 101.06382978723404%;
+}
+
+.controls-row input.offset11,
+textarea.offset11,
+select.offset11,
+uneditable-input.offset11 {
+  margin-left: 92.7304964539007%;
+}
+
+.controls-row input.offset10,
+textarea.offset10,
+select.offset10,
+uneditable-input.offset10 {
+  margin-left: 84.39716312056738%;
+}
+
+.controls-row input.offset9,
+textarea.offset9,
+select.offset9,
+uneditable-input.offset9 {
+  margin-left: 76.06382978723404%;
+}
+
+.controls-row input.offset8,
+textarea.offset8,
+select.offset8,
+uneditable-input.offset8 {
+  margin-left: 67.7304964539007%;
+}
+
+.controls-row input.offset7,
+textarea.offset7,
+select.offset7,
+uneditable-input.offset7 {
+  margin-left: 59.39716312056738%;
+}
+
+.controls-row input.offset6,
+textarea.offset6,
+select.offset6,
+uneditable-input.offset6 {
+  margin-left: 51.06382978723404%;
+}
+
+.controls-row input.offset5,
+textarea.offset5,
+select.offset5,
+uneditable-input.offset5 {
+  margin-left: 42.73049645390071%;
+}
+
+.controls-row input.offset4,
+textarea.offset4,
+select.offset4,
+uneditable-input.offset4 {
+  margin-left: 34.39716312056737%;
+}
+
+.controls-row input.offset3,
+textarea.offset3,
+select.offset3,
+uneditable-input.offset3 {
+  margin-left: 26.06382978723404%;
+}
+
+.controls-row input.offset2,
+textarea.offset2,
+select.offset2,
+uneditable-input.offset2 {
+  margin-left: 17.730496453900706%;
+}
+
+.controls-row input.offset1,
+textarea.offset1,
+select.offset1,
+uneditable-input.offset1 {
+  margin-left: 9.397163120567374%;
+}
+
+.input-append input[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend input[class*="span"],
+.input-prepend .uneditable-input[class*="span"] {
+  display: inline-block;
+}
+
 input[class*="span"],
 select[class*="span"],
 textarea[class*="span"],
@@ -1372,8 +1447,8 @@ select:focus:required:invalid:focus {
 .input-append .uneditable-input,
 .input-prepend .uneditable-input {
   position: relative;
-  margin-bottom: 0;
-  *margin-left: 0;
+  float: none;
+  margin: 0;
   font-size: 14px;
   vertical-align: top;
   -webkit-border-radius: 0 3px 3px 0;
@@ -1390,6 +1465,15 @@ select:focus:required:invalid:focus {
   z-index: 2;
 }
 
+.input-append input[class*="span"],
+.input-prepend input[class*="span"],
+.input-append select[class*="span"],
+.input-prepend select[class*="span"],
+.input-append .uneditable-input[class*="span"],
+.input-prepend .uneditable-input[class*="span"] {
+  margin: 0;
+}
+
 .input-append .add-on,
 .input-prepend .add-on {
   display: inline-block;
diff --git a/docs/base-css.html b/docs/base-css.html
index b87c27829..8a18ab9a3 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1131,20 +1131,22 @@ For example, <code><section></code> should be wrapped as inlin
           <form class="bs-docs-example">
             <div class="input-prepend">
               <span class="add-on">@</span>
-              <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+              <input id="prependedInput" size="16" type="text" placeholder="Username">
             </div>
             <br>
             <div class="input-append">
-              <input class="span2" id="appendedInput" size="16" type="text">
+              <input id="appendedInput" size="16" type="text">
               <span class="add-on">.00</span>
             </div>
           </form>
 <pre class="prettyprint linenums">
 &lt;div class="input-prepend"&gt;
-  &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="Username"&gt;
+  &lt;span class="add-on"&gt;@&lt;/span&gt;
+  &lt;input id="prependedInput" size="16" type="text" placeholder="Username"&gt;
 &lt;/div&gt;
 &lt;div class="input-append"&gt;
-  &lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+  &lt;input id="appendedInput" size="16" type="text"&gt;
+  &lt;span class="add-on"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1153,13 +1155,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
           <form class="bs-docs-example form-inline">
             <div class="input-prepend input-append">
               <span class="add-on">$</span>
-              <input class="span2" id="appendedPrependedInput" size="16" type="text">
+              <input id="appendedPrependedInput" size="16" type="text">
               <span class="add-on">.00</span>
             </div>
           </form>
 <pre class="prettyprint linenums">
 &lt;div class="input-prepend input-append"&gt;
-  &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+  &lt;span class="add-on"&gt;$&lt;/span&gt;
+  &lt;input id="appendedPrependedInput" size="16" type="text"&gt;
+  &lt;span class="add-on"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1167,46 +1171,49 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
           <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
           <form class="bs-docs-example">
             <div class="input-append">
-              <input class="span2" id="appendedInputButton" size="16" type="text">
+              <input id="appendedInputButton" size="16" type="text">
               <button class="btn" type="button">Go!</button>
             </div>
             <br>
             <div class="input-append">
-              <input class="span2" id="appendedInputButtons" size="16" type="text">
+              <input id="appendedInputButtons" size="16" type="text">
               <button class="btn" type="button">Search</button>
               <button class="btn" type="button">Options</button>
             </div>
           </form>
 <pre class="prettyprint linenums">
 &lt;div class="input-append"&gt;
-  &lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;input id="appendedInputButton" size="16" type="text"&gt;
+  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
 &lt;/div&gt;
 
 &lt;div class="input-append"&gt;
-  &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+  &lt;input id="appendedInputButtons" size="16" type="text"&gt;
+  &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+  &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Search form</h4>
           <form class="bs-docs-example form-search">
             <div class="input-append">
-              <input type="text" class="span2 search-query">
+              <input type="text" class="search-query">
               <button type="submit" class="btn">Search</button>
             </div>
             <div class="input-prepend">
               <button type="submit" class="btn">Search</button>
-              <input type="text" class="span2 search-query">
+              <input type="text" class="search-query">
             </div>
           </form>
 <pre class="prettyprint linenums">
 &lt;form class="form-search"&gt;
   &lt;div class="input-append"&gt;
-    &lt;input type="text" class="span2 search-query"&gt;
+    &lt;input type="text" class="search-query"&gt;
     &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="input-prepend"&gt;
     &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
-    &lt;input type="text" class="span2 search-query"&gt;
+    &lt;input type="text" class="search-query"&gt;
   &lt;/div&gt;
 &lt;/form&gt;
 </pre>
@@ -1284,7 +1291,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
 
           <p>For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.</p>
           <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls">
+            <div class="controls controls-row">
               <input class="span5" type="text" placeholder=".span5">
             </div>
             <div class="controls controls-row">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index c242fef50..743270004 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1068,20 +1068,22 @@
           <form class="bs-docs-example">
             <div class="input-prepend">
               <span class="add-on">@</span>
-              <input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
+              <input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
             </div>
             <br>
             <div class="input-append">
-              <input class="span2" id="appendedInput" size="16" type="text">
+              <input id="appendedInput" size="16" type="text">
               <span class="add-on">.00</span>
             </div>
           </form>
 <pre class="prettyprint linenums">
 &lt;div class="input-prepend"&gt;
-  &lt;span class="add-on"&gt;@&lt;/span&gt;&lt;input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"&gt;
+  &lt;span class="add-on"&gt;@&lt;/span&gt;
+  &lt;input id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}"&gt;
 &lt;/div&gt;
 &lt;div class="input-append"&gt;
-  &lt;input class="span2" id="appendedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+  &lt;input id="appendedInput" size="16" type="text"&gt;
+  &lt;span class="add-on"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1090,13 +1092,15 @@
           <form class="bs-docs-example form-inline">
             <div class="input-prepend input-append">
               <span class="add-on">$</span>
-              <input class="span2" id="appendedPrependedInput" size="16" type="text">
+              <input id="appendedPrependedInput" size="16" type="text">
               <span class="add-on">.00</span>
             </div>
           </form>
 <pre class="prettyprint linenums">
 &lt;div class="input-prepend input-append"&gt;
-  &lt;span class="add-on"&gt;$&lt;/span&gt;&lt;input class="span2" id="appendedPrependedInput" size="16" type="text"&gt;&lt;span class="add-on"&gt;.00&lt;/span&gt;
+  &lt;span class="add-on"&gt;$&lt;/span&gt;
+  &lt;input id="appendedPrependedInput" size="16" type="text"&gt;
+  &lt;span class="add-on"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
@@ -1104,46 +1108,49 @@
           <p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
           <form class="bs-docs-example">
             <div class="input-append">
-              <input class="span2" id="appendedInputButton" size="16" type="text">
+              <input id="appendedInputButton" size="16" type="text">
               <button class="btn" type="button">Go!</button>
             </div>
             <br>
             <div class="input-append">
-              <input class="span2" id="appendedInputButtons" size="16" type="text">
+              <input id="appendedInputButtons" size="16" type="text">
               <button class="btn" type="button">Search</button>
               <button class="btn" type="button">Options</button>
             </div>
           </form>
 <pre class="prettyprint linenums">
 &lt;div class="input-append"&gt;
-  &lt;input class="span2" id="appendedInputButton" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;input id="appendedInputButton" size="16" type="text"&gt;
+  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
 &lt;/div&gt;
 
 &lt;div class="input-append"&gt;
-  &lt;input class="span2" id="appendedInputButtons" size="16" type="text"&gt;&lt;button class="btn" type="button"&gt;Search&lt;/button&gt;&lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
+  &lt;input id="appendedInputButtons" size="16" type="text"&gt;
+  &lt;button class="btn" type="button"&gt;Search&lt;/button&gt;
+  &lt;button class="btn" type="button"&gt;Options&lt;/button&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>{{_i}}Search form{{/i}}</h4>
           <form class="bs-docs-example form-search">
             <div class="input-append">
-              <input type="text" class="span2 search-query">
+              <input type="text" class="search-query">
               <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
             </div>
             <div class="input-prepend">
               <button type="submit" class="btn">{{_i}}Search{{/i}}</button>
-              <input type="text" class="span2 search-query">
+              <input type="text" class="search-query">
             </div>
           </form>{{! /example }}
 <pre class="prettyprint linenums">
 &lt;form class="form-search"&gt;
   &lt;div class="input-append"&gt;
-    &lt;input type="text" class="span2 search-query"&gt;
+    &lt;input type="text" class="search-query"&gt;
     &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class="input-prepend"&gt;
     &lt;button type="submit" class="btn"&gt;{{_i}}Search{{/i}}&lt;/button&gt;
-    &lt;input type="text" class="span2 search-query"&gt;
+    &lt;input type="text" class="search-query"&gt;
   &lt;/div&gt;
 &lt;/form&gt;
 </pre>
@@ -1221,7 +1228,7 @@
 
           <p>{{_i}}For multiple grid inputs per line, <strong>use the <code>.controls-row</code> modifier class for proper spacing</strong>. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.{{/i}}</p>
           <form class="bs-docs-example" style="padding-bottom: 15px;">
-            <div class="controls">
+            <div class="controls controls-row">
               <input class="span5" type="text" placeholder=".span5">
             </div>
             <div class="controls controls-row">