Merge branch 'bs3-input-groups' into 3.0.0-wip

Conflicts:
	docs/assets/css/bootstrap.css

3 files changed, 254 insertions, 553 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 33581659dd..829c270393 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1336,63 +1336,38 @@ select:focus:invalid:focus {
   vertical-align: middle;
 }
 
-.input-append,
-.input-prepend {
-  margin-bottom: 5px;
-  font-size: 0;
-  white-space: nowrap;
-}
-
-.input-append input,
-.input-prepend input,
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input,
-.input-append .dropdown-menu,
-.input-prepend .dropdown-menu {
-  font-size: 14px;
+.input-group {
+  display: table;
 }
 
-.input-append input,
-.input-prepend input,
-.input-append select,
-.input-prepend select,
-.input-append .uneditable-input,
-.input-prepend .uneditable-input {
-  position: relative;
+.input-group[class*="span"] {
   float: none;
-  margin: 0;
-  font-size: 14px;
-  vertical-align: top;
-  border-radius: 0 4px 4px 0;
+  padding: 0;
 }
 
-.input-append input:focus,
-.input-prepend input:focus,
-.input-append select:focus,
-.input-prepend select:focus,
-.input-append .uneditable-input:focus,
-.input-prepend .uneditable-input:focus {
-  z-index: 2;
+.input-group input,
+.input-group select,
+.input-group .uneditable-input {
+  width: 100%;
 }
 
-.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"] {
+.input-group-addon,
+.input-group-btn,
+.input-group input,
+.input-group .uneditable-input {
+  display: table-cell;
   margin: 0;
+  border-radius: 0;
 }
 
-.input-append .add-on,
-.input-prepend .add-on {
-  display: inline-block;
-  width: auto;
-  height: 20px;
-  min-width: 16px;
-  padding: 6px;
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  vertical-align: middle;
+}
+
+.input-group-addon {
+  padding: 6px 8px;
   font-size: 14px;
   font-weight: normal;
   line-height: 20px;
@@ -1400,243 +1375,69 @@ select:focus:invalid:focus {
   text-shadow: 0 1px 0 #fff;
   background-color: #eeeeee;
   border: 1px solid #ccc;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
-.input-append .add-on,
-.input-prepend .add-on,
-.input-append .btn,
-.input-prepend .btn,
-.input-append .btn-group > .dropdown-toggle,
-.input-prepend .btn-group > .dropdown-toggle {
-  vertical-align: top;
-  border-radius: 0;
-}
-
-.input-append .active,
-.input-prepend .active {
-  background-color: #dff0d8;
-  border-color: #468847;
-}
-
-.input-prepend .add-on,
-.input-prepend .btn {
-  margin-right: -1px;
-}
-
-.input-prepend .add-on:first-child,
-.input-prepend .btn:first-child {
-  border-radius: 4px 0 0 4px;
-}
-
-.input-append input,
-.input-append select,
-.input-append .uneditable-input {
-  border-radius: 4px 0 0 4px;
-}
-
-.input-append input + .btn-group .btn,
-.input-append select + .btn-group .btn,
-.input-append .uneditable-input + .btn-group .btn,
-.input-append input + .btn-group .btn:last-child,
-.input-append select + .btn-group .btn:last-child,
-.input-append .uneditable-input + .btn-group .btn:last-child {
-  border-radius: 0 4px 4px 0;
-}
-
-.input-append .add-on,
-.input-append .btn,
-.input-append .btn-group {
-  margin-left: -1px;
-}
-
-.input-append .add-on:last-child,
-.input-append .btn:last-child,
-.input-append .btn-group:last-child > .dropdown-toggle {
-  border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append input,
-.input-prepend.input-append select,
-.input-prepend.input-append .uneditable-input {
-  border-radius: 0;
-}
-
-.input-prepend.input-append input + .btn-group .btn,
-.input-prepend.input-append select + .btn-group .btn,
-.input-prepend.input-append .uneditable-input + .btn-group .btn {
-  border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .add-on:first-child,
-.input-prepend.input-append .btn:first-child {
-  margin-right: -1px;
-  border-radius: 4px 0 0 4px;
-}
-
-.input-prepend.input-append .add-on:last-child,
-.input-prepend.input-append .btn:last-child {
-  margin-left: -1px;
-  border-radius: 0 4px 4px 0;
-}
-
-.input-prepend.input-append .btn-group:first-child {
-  margin-left: 0;
-}
-
-input.search-query {
-  padding-right: 14px;
-  padding-right: 4px \9;
-  padding-left: 14px;
-  padding-left: 4px \9;
-  /* IE8 doesn't have border radius, so don't indent the padding */
-
-  margin-bottom: 0;
-  border-radius: 20px;
-}
-
-/* Allow for input prepend/append in search forms */
-
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  border-radius: 0;
-}
-
-.form-search .input-append .search-query {
-  border-radius: 20px 0 0 20px;
-}
-
-.form-search .input-append .btn {
-  border-radius: 0 20px 20px 0;
-}
-
-.form-search .input-prepend .search-query {
-  border-radius: 0 20px 20px 0;
-}
-
-.form-search .input-prepend .btn {
-  border-radius: 20px 0 0 20px;
-}
-
-.form-search input,
-.form-inline input,
-.form-horizontal input,
-.form-search textarea,
-.form-inline textarea,
-.form-horizontal textarea,
-.form-search select,
-.form-inline select,
-.form-horizontal select,
-.form-search .help-inline,
-.form-inline .help-inline,
-.form-horizontal .help-inline,
-.form-search .uneditable-input,
-.form-inline .uneditable-input,
-.form-horizontal .uneditable-input,
-.form-search .input-prepend,
-.form-inline .input-prepend,
-.form-horizontal .input-prepend,
-.form-search .input-append,
-.form-inline .input-append,
-.form-horizontal .input-append {
-  display: inline-block;
-  margin-bottom: 0;
-  vertical-align: middle;
-}
-
-.form-search .hide,
-.form-inline .hide,
-.form-horizontal .hide {
-  display: none;
+.input-group input:first-child,
+.input-group .uneditable-input:first-child,
+.input-group-addon:first-child {
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
 }
 
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block;
+.input-group-addon:first-child {
+  border-right: 0;
 }
 
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0;
+.input-group input:last-child,
+.input-group .uneditable-input:last-child,
+.input-group-addon:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  display: inline-block;
-  padding-left: 0;
+.input-group-addon:last-child {
+  border-left: 0;
 }
 
-.form-search .radio label,
-.form-search .checkbox label,
-.form-inline .radio label,
-.form-inline .checkbox label {
-  margin-bottom: 0;
-  vertical-align: middle;
+.input-group-btn,
+.input-group-btn .btn {
+  white-space: nowrap;
 }
 
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
+.input-group-btn > .btn {
   float: left;
-  margin-right: 3px;
-  margin-left: 0;
-}
-
-.control-group {
-  margin-bottom: 10px;
-}
-
-legend + .control-group {
-  margin-top: 20px;
-  -webkit-margin-top-collapse: separate;
-}
-
-.form-horizontal .control-group {
-  margin-bottom: 20px;
-}
-
-.form-horizontal .control-group:before,
-.form-horizontal .control-group:after {
-  display: table;
-  content: " ";
+  border-radius: 0;
 }
 
-.form-horizontal .control-group:after {
-  clear: both;
+.input-group-btn > .btn + .btn {
+  border-left: 0;
 }
 
-.form-horizontal .control-label {
-  float: left;
-  width: 160px;
-  padding-top: 5px;
-  text-align: right;
+.input-group-btn.btn-group {
+  display: table-cell;
 }
 
-.form-horizontal .controls {
-  margin-left: 180px;
+.input-group-btn:first-child > .btn,
+.input-group-btn.btn-group:first-child > .btn {
+  border-right: 0;
 }
 
-.form-horizontal .help-block {
-  margin-bottom: 0;
+.input-group-btn:first-child > .btn,
+.input-group-btn.btn-group:first-child > .btn {
+  border-radius: 4px 0 0 4px;
 }
 
-.form-horizontal input + .help-block,
-.form-horizontal select + .help-block,
-.form-horizontal textarea + .help-block,
-.form-horizontal .uneditable-input + .help-block,
-.form-horizontal .input-prepend + .help-block,
-.form-horizontal .input-append + .help-block {
-  margin-top: 10px;
+.input-group-btn:last-child > .btn,
+.input-group-btn.btn-group:last-child > .btn:first-child {
+  border-left: 0;
 }
 
-.form-horizontal .form-actions {
-  padding-left: 180px;
+.input-group-btn:last-child > .btn,
+.input-group-btn.btn-group:last-child > .btn {
+  border-radius: 0 4px 4px 0;
 }
 
 table {
@@ -2657,7 +2458,6 @@ table th[class*="span"] {
 
 .typeahead {
   z-index: 1051;
-  margin-top: 2px;
 }
 
 .well {
@@ -2748,21 +2548,22 @@ button.close {
   color: #333333;
   text-align: center;
   text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
-  background-color: #f5f5f5;
-  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
-  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
-  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-color: #f0f0f0;
+  background-image: -moz-linear-gradient(top, #fafafa, #e1e1e1);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#e1e1e1));
+  background-image: -webkit-linear-gradient(top, #fafafa, #e1e1e1);
+  background-image: -o-linear-gradient(top, #fafafa, #e1e1e1);
+  background-image: linear-gradient(to bottom, #fafafa, #e1e1e1);
   background-repeat: repeat-x;
   border: 1px solid #bbbbbb;
-  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: #e1e1e1 #e1e1e1 #bababa;
   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
   border-bottom-color: #a2a2a2;
   border-radius: 4px;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffe1e1e1', GradientType=0);
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -2774,12 +2575,12 @@ button.close {
 .btn.disabled,
 .btn[disabled] {
   color: #333333;
-  background-color: #e6e6e6;
+  background-color: #e1e1e1;
 }
 
 .btn:active,
 .btn.active {
-  background-color: #cccccc \9;
+  background-color: #c7c7c7 \9;
 }
 
 .btn:hover {
@@ -3200,7 +3001,7 @@ input[type="button"].btn-block {
 }
 
 .btn-group.open .btn.dropdown-toggle {
-  background-color: #e6e6e6;
+  background-color: #e1e1e1;
 }
 
 .btn-group.open .btn-primary.dropdown-toggle {
diff --git a/docs/css.html b/docs/css.html
index 87c8d4f856..9b23a836cd 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -1119,13 +1119,15 @@ For example, <code><section></code> should be wrapped as inlin
               <label class="control-label" for="inputPassword">Password</label>
               <div class="controls">
                 <input type="password" id="inputPassword" placeholder="Password">
+                <div class="checkbox">
+                  <label>
+                    <input type="checkbox"> Remember me
+                  </label>
+                </div>
               </div>
             </div>
             <div class="control-group">
               <div class="controls">
-                <label class="checkbox">
-                  <input type="checkbox"> Remember me
-                </label>
                 <button type="submit" class="btn">Sign in</button>
               </div>
             </div>
@@ -1146,9 +1148,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
   &lt;/div&gt;
   &lt;div class="control-group"&gt;
     &lt;div class="controls"&gt;
-      &lt;label class="checkbox"&gt;
-        &lt;input type="checkbox"&gt; Remember me
-      &lt;/label&gt;
+      &lt;div class="checkbox"&gt;
+        &lt;label&gt;
+          &lt;input type="checkbox"&gt; Remember me
+        &lt;/label&gt;
+      &lt;/div&gt;
       &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
     &lt;/div&gt;
   &lt;/div&gt;
@@ -1296,85 +1300,82 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
-          <h3>Prepended and appended inputs</h3>
-          <p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
-
-          <h4>Default options</h4>
-          <p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
+          <h3>Input groups</h3>
+          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
+          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <span class="add-on">@</span>
-              <input id="prependedInput" type="text" placeholder="Username">
+            <div class="input-group span9">
+              <span class="input-group-addon">@</span>
+              <input type="text" placeholder="Username">
             </div>
             <br>
-            <div class="input-append">
-              <input id="appendedInput" type="text">
-              <span class="add-on">.00</span>
+            <div class="input-group span6">
+              <input type="text">
+              <span class="input-group-addon">.00</span>
+            </div>
+            <br>
+            <div class="input-group span3">
+              <span class="input-group-addon">$</span>
+              <input type="text">
+              <span class="input-group-addon">.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 id="prependedInput" type="text" placeholder="Username"&gt;
+&lt;div class="input-group span9"&gt;
+  &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
+  &lt;input type="text" placeholder="Username"&gt;
 &lt;/div&gt;
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+
+&lt;div class="input-group span6"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
-</pre>
 
-          <h4>Combined</h4>
-          <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
-          <form class="bs-docs-example form-inline">
-            <div class="input-prepend input-append">
-              <span class="add-on">$</span>
-              <input id="appendedPrependedInput" 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 id="appendedPrependedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+&lt;div class="input-group span3"&gt;
+  &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Buttons instead of text</h4>
-          <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>
+          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButton" type="text">
-              <button class="btn" type="button">Go!</button>
+            <div class="input-group span7">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
+              <input type="text">
             </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" type="text"&gt;
-  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
-&lt;/div&gt;
-</pre>
-          <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButtons" type="text">
-              <button class="btn" type="button">Search</button>
-              <button class="btn" type="button">Options</button>
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" 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 class="input-group span7"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
+  &lt;input type="text"&gt;
+&lt;/div&gt;
+
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Button dropdowns</h4>
           <p></p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedDropdownButton" type="text">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1384,27 +1385,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-            </div><!-- /input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInputButtons" type="text"&gt;
-  &lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+              <input type="text">
+            </div><!-- /input-group -->
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1414,12 +1400,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-              <input class="span2" id="prependedDropdownButton" type="text">
-            </div><!-- /input-prepend -->
+            </div><!-- /input-group -->
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-prepend"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1428,48 +1413,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
       ...
     &lt;/ul&gt;
   &lt;/div&gt;
-  &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
+  &lt;input type="text"&gt;
 &lt;/div&gt;
-</pre>
 
-          <form class="bs-docs-example">
-            <div class="input-prepend input-append">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-              <input class="span2" id="appendedPrependedDropdownButton" type="text">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-            </div><!-- /input-prepend input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-prepend input-append"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-  &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1483,8 +1432,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
 
           <h4>Segmented dropdown groups</h4>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1499,9 +1448,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
               </div>
               <input type="text" class="span3">
             </div>
-            <div class="input-append">
-              <input type="text" class="span3">
-              <div class="btn-group">
+
+            <br>
+
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1517,16 +1469,14 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;form&gt;
-  &lt;div class="input-prepend"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-    &lt;input type="text" class="span3"&gt;
-  &lt;/div&gt;
-  &lt;div class="input-append"&gt;
-    &lt;input type="text" class="span3"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
+&lt;div class="input-prepend"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;input type="text" class="span3"&gt;
+&lt;/div&gt;
+&lt;div class="input-append"&gt;
+  &lt;input type="text" class="span3"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+&lt;/div&gt;
 </pre>
 
           <h4>Search form</h4>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index 73ab657a9f..ab1cd8c30d 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1059,13 +1059,15 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
               <label class="control-label" for="inputPassword">Password</label>
               <div class="controls">
                 <input type="password" id="inputPassword" placeholder="Password">
+                <div class="checkbox">
+                  <label>
+                    <input type="checkbox"> Remember me
+                  </label>
+                </div>
               </div>
             </div>
             <div class="control-group">
               <div class="controls">
-                <label class="checkbox">
-                  <input type="checkbox"> Remember me
-                </label>
                 <button type="submit" class="btn">Sign in</button>
               </div>
             </div>
@@ -1086,9 +1088,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
   &lt;/div&gt;
   &lt;div class="control-group"&gt;
     &lt;div class="controls"&gt;
-      &lt;label class="checkbox"&gt;
-        &lt;input type="checkbox"&gt; Remember me
-      &lt;/label&gt;
+      &lt;div class="checkbox"&gt;
+        &lt;label&gt;
+          &lt;input type="checkbox"&gt; Remember me
+        &lt;/label&gt;
+      &lt;/div&gt;
       &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
     &lt;/div&gt;
   &lt;/div&gt;
@@ -1236,85 +1240,82 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
           <h2 id="forms-extending">Extending form controls</h2>
           <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
 
-          <h3>Prepended and appended inputs</h3>
-          <p>Add text or buttons before or after any text-based input. Do note that <code>select</code> elements are not supported here.</p>
-
-          <h4>Default options</h4>
-          <p>Wrap an <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
+          <h3>Input groups</h3>
+          <p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with a <code>.add-on</code> to prepend or append elements to an <code>&lt;input&gt;</code>.</p>
+          <p>Avoid using <code>&lt;select&gt;</code> elements here as they cannot be fully styled in WebKit browsers.</p>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <span class="add-on">@</span>
-              <input id="prependedInput" type="text" placeholder="Username">
+            <div class="input-group span9">
+              <span class="input-group-addon">@</span>
+              <input type="text" placeholder="Username">
             </div>
             <br>
-            <div class="input-append">
-              <input id="appendedInput" type="text">
-              <span class="add-on">.00</span>
+            <div class="input-group span6">
+              <input type="text">
+              <span class="input-group-addon">.00</span>
+            </div>
+            <br>
+            <div class="input-group span3">
+              <span class="input-group-addon">$</span>
+              <input type="text">
+              <span class="input-group-addon">.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 id="prependedInput" type="text" placeholder="Username"&gt;
+&lt;div class="input-group span9"&gt;
+  &lt;span class="input-group-addon"&gt;@&lt;/span&gt;
+  &lt;input type="text" placeholder="Username"&gt;
 &lt;/div&gt;
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+
+&lt;div class="input-group span6"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
-</pre>
 
-          <h4>Combined</h4>
-          <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
-          <form class="bs-docs-example form-inline">
-            <div class="input-prepend input-append">
-              <span class="add-on">$</span>
-              <input id="appendedPrependedInput" 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 id="appendedPrependedInput" type="text"&gt;
-  &lt;span class="add-on"&gt;.00&lt;/span&gt;
+&lt;div class="input-group span3"&gt;
+  &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-addon"&gt;.00&lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Buttons instead of text</h4>
-          <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>
+          <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButton" type="text">
-              <button class="btn" type="button">Go!</button>
+            <div class="input-group span7">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
+              <input type="text">
             </div>
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" type="text"&gt;
-  &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
-&lt;/div&gt;
-</pre>
-          <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedInputButtons" type="text">
-              <button class="btn" type="button">Search</button>
-              <button class="btn" type="button">Options</button>
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <span class="input-group-btn">
+                <button class="btn" type="button">Go!</button>
+              </span>
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input class="span3" id="appendedInputButton" 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 class="input-group span7"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
+  &lt;input type="text"&gt;
+&lt;/div&gt;
+
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;span class="input-group-btn"&gt;
+    &lt;button class="btn" type="button"&gt;Go!&lt;/button&gt;
+  &lt;/span&gt;
 &lt;/div&gt;
 </pre>
 
           <h4>Button dropdowns</h4>
           <p></p>
           <form class="bs-docs-example">
-            <div class="input-append">
-              <input class="span3" id="appendedDropdownButton" type="text">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1324,27 +1325,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-            </div><!-- /input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-append"&gt;
-  &lt;input id="appendedInputButtons" type="text"&gt;
-  &lt;input class="span3" id="appendedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-          <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+              <input type="text">
+            </div><!-- /input-group -->
+            <br>
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                 <ul class="dropdown-menu">
                   <li><a href="#">Action</a></li>
@@ -1354,12 +1340,11 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
                   <li><a href="#">Separated link</a></li>
                 </ul>
               </div><!-- /btn-group -->
-              <input class="span2" id="prependedDropdownButton" type="text">
-            </div><!-- /input-prepend -->
+            </div><!-- /input-group -->
           </form>
 <pre class="prettyprint linenums">
-&lt;div class="input-prepend"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1368,48 +1353,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
       ...
     &lt;/ul&gt;
   &lt;/div&gt;
-  &lt;input class="span2" id="prependedDropdownButton" type="text"&gt;
+  &lt;input type="text"&gt;
 &lt;/div&gt;
-</pre>
 
-          <form class="bs-docs-example">
-            <div class="input-prepend input-append">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-              <input class="span2" id="appendedPrependedDropdownButton" type="text">
-              <div class="btn-group">
-                <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
-                <ul class="dropdown-menu">
-                  <li><a href="#">Action</a></li>
-                  <li><a href="#">Another action</a></li>
-                  <li><a href="#">Something else here</a></li>
-                  <li class="divider"></li>
-                  <li><a href="#">Separated link</a></li>
-                </ul>
-              </div><!-- /btn-group -->
-            </div><!-- /input-prepend input-append -->
-          </form>
-<pre class="prettyprint linenums">
-&lt;div class="input-prepend input-append"&gt;
-  &lt;div class="btn-group"&gt;
-    &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
-      Action
-      &lt;span class="caret"&gt;&lt;/span&gt;
-    &lt;/button&gt;
-    &lt;ul class="dropdown-menu"&gt;
-      ...
-    &lt;/ul&gt;
-  &lt;/div&gt;
-  &lt;input class="span2" id="appendedPrependedDropdownButton" type="text"&gt;
-  &lt;div class="btn-group"&gt;
+&lt;div class="input-group span7"&gt;
+  &lt;input type="text"&gt;
+  &lt;div class="input-group-btn btn-group"&gt;
     &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;
       Action
       &lt;span class="caret"&gt;&lt;/span&gt;
@@ -1423,8 +1372,8 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
 
           <h4>Segmented dropdown groups</h4>
           <form class="bs-docs-example">
-            <div class="input-prepend">
-              <div class="btn-group">
+            <div class="input-group span7">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1439,9 +1388,12 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
               </div>
               <input type="text" class="span3">
             </div>
-            <div class="input-append">
-              <input type="text" class="span3">
-              <div class="btn-group">
+
+            <br>
+
+            <div class="input-group span7">
+              <input type="text">
+              <div class="input-group-btn btn-group">
                 <button class="btn" tabindex="-1">Action</button>
                 <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
                   <span class="caret"></span>
@@ -1457,16 +1409,14 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
             </div>
           </form>
 <pre class="prettyprint linenums">
-&lt;form&gt;
-  &lt;div class="input-prepend"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-    &lt;input type="text" class="span3"&gt;
-  &lt;/div&gt;
-  &lt;div class="input-append"&gt;
-    &lt;input type="text" class="span3"&gt;
-    &lt;div class="btn-group"&gt;...&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
+&lt;div class="input-prepend"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+  &lt;input type="text" class="span3"&gt;
+&lt;/div&gt;
+&lt;div class="input-append"&gt;
+  &lt;input type="text" class="span3"&gt;
+  &lt;div class="btn-group"&gt;...&lt;/div&gt;
+&lt;/div&gt;
 </pre>
 
           <h4>Search form</h4>