From 4c82dd3645ec60277b07a161c779f57dda10037c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Dec 2012 21:46:14 -0800 Subject: [PATCH] Refactor input groups * Deprecate .input-append and .input-prepend * Use new, single base class for component, .input-group * Deprecate .addon for .input-group-addon * For compatibility with all buttons, require .input-group-btn to wrap buttons and button dropdowns * Still need to reimplement with segmented button dropdowns, but that's dependent on a refactor of those first --- docs/assets/css/bootstrap.css | 347 +++++++----------------------- docs/css.html | 274 +++++++++++------------ docs/templates/pages/css.mustache | 276 +++++++++++------------- less/buttons.less | 1 + less/forms.less | 335 ++++++++-------------------- less/variables.less | 4 +- 6 files changed, 422 insertions(+), 815 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d4495a2704..d7fc04bfec 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1340,63 +1340,38 @@ select:focus:invalid:focus { vertical-align: middle; } -.input-append, -.input-prepend { - margin-bottom: 5px; - font-size: 0; - white-space: nowrap; +.input-group { + display: table; } -.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-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; + padding: 0; +} + +.input-group input, +.input-group select, +.input-group .uneditable-input { + width: 100%; +} + +.input-group-addon, +.input-group-btn, +.input-group input, +.input-group .uneditable-input { + display: table-cell; margin: 0; - font-size: 14px; - vertical-align: top; - border-radius: 0 4px 4px 0; + border-radius: 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-addon, +.input-group-btn { + width: 1%; + vertical-align: middle; } -.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; - width: auto; - height: 20px; - min-width: 16px; - padding: 6px; +.input-group-addon { + padding: 6px 8px; font-size: 14px; font-weight: normal; line-height: 20px; @@ -1404,244 +1379,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-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; } -.input-append .active, -.input-prepend .active { - background-color: #dff0d8; - border-color: #468847; +.input-group-addon:first-child { + border-right: 0; } -.input-prepend .add-on, -.input-prepend .btn { - margin-right: -1px; +.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; } -.input-prepend .add-on:first-child, -.input-prepend .btn:first-child { - border-radius: 4px 0 0 4px; +.input-group-addon:last-child { + border-left: 0; } -.input-append input, -.input-append select, -.input-append .uneditable-input { - border-radius: 4px 0 0 4px; +.input-group-btn, +.input-group-btn .btn { + white-space: nowrap; } -.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; -} - -.form-search label, -.form-inline label, -.form-search .btn-group, -.form-inline .btn-group { - display: inline-block; -} - -.form-search .input-append, -.form-inline .input-append, -.form-search .input-prepend, -.form-inline .input-prepend { - margin-bottom: 0; -} - -.form-search .radio, -.form-search .checkbox, -.form-inline .radio, -.form-inline .checkbox { - display: inline-block; - padding-left: 0; -} - -.form-search .radio label, -.form-search .checkbox label, -.form-inline .radio label, -.form-inline .checkbox label { - margin-bottom: 0; - vertical-align: middle; -} - -.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; + border-radius: 0; } -.control-group { - margin-bottom: 10px; +.input-group-btn > .btn + .btn { + border-left: 0; } -legend + .control-group { - margin-top: 20px; - -webkit-margin-top-collapse: separate; +.input-group-btn.btn-group { + display: table-cell; } -.form-horizontal .control-group { - margin-bottom: 20px; +.input-group-btn:first-child > .btn:last-child, +.input-group-btn.btn-group:first-child > .btn { + border-right: 0; } -.form-horizontal .control-group:before, -.form-horizontal .control-group:after { - display: table; - line-height: 0; - content: ""; +.input-group-btn:first-child > .btn:first-child, +.input-group-btn.btn-group:first-child > .btn { + border-radius: 4px 0 0 4px; } -.form-horizontal .control-group:after { - clear: both; +.input-group-btn:last-child > .btn:first-child, +.input-group-btn.btn-group:last-child > .btn:first-child { + border-left: 0; } -.form-horizontal .control-label { - float: left; - width: 160px; - padding-top: 5px; - text-align: right; -} - -.form-horizontal .controls { - margin-left: 180px; -} - -.form-horizontal .help-block { - margin-bottom: 0; -} - -.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; -} - -.form-horizontal .form-actions { - padding-left: 180px; +.input-group-btn:last-child > .btn:last-child, +.input-group-btn.btn-group:last-child > .btn { + border-radius: 0 4px 4px 0; } table { @@ -2753,21 +2553,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); @@ -2779,12 +2580,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 { @@ -3205,7 +3006,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 728dac389f..e6506c432b 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1119,13 +1119,15 @@ For example, <code><section></code> should be wrapped as inlin
+
+ +
-
@@ -1146,9 +1148,11 @@ For example, <code><section></code> should be wrapped as inlin </div> <div class="control-group"> <div class="controls"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </div> </div> @@ -1284,85 +1288,116 @@ For example, <code><section></code> should be wrapped as inlin

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

-

Prepended and appended inputs

-

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

- -

Default options

-

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

+

Input groups

+

Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.

+

Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

-
- @ - +
+ @ +

-
- - .00 +
+ + .00 +
+
+
+ $ + + .00 
-<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>
-<div class="input-append">
-  <input id="appendedInput" type="text">
-  <span class="add-on">.00</span>
-</div>
-
-

Combined

-

Use both classes and two instances of .add-on to prepend and append an input.

-
-
- $ - - .00 -
-
-
-<div class="input-prepend input-append">
-  <span class="add-on">$</span>
-  <input id="appendedPrependedInput" type="text">
-  <span class="add-on">.00</span>
+<div class="input-group span6">
+  <input type="text">
+  <span class="input-group-addon">.00</span>
+</div>
+
+<div class="input-group span3">
+  <span class="input-group-addon">$</span>
+  <input type="text">
+  <span class="input-group-addon">.00</span>
 </div>

Buttons instead of text

-

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

+

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

-
- - +
+ + + + +
+
+
+ + + + 
-<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>
+
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
 </div>
-
- - - +
+ + + + + +
+
+
+ + + + + 
-<div class="input-append">
-  <input class="span3" id="appendedInputButton" type="text">
-  <button class="btn" type="button">Search</button>
-  <button class="btn" type="button">Options</button>
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+</div>
+
+<div class="input-group span7">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+  <input type="text">
 </div>

Button dropdowns

-
- -
+
+
  • Action
    • @@ -1372,13 +1407,26 @@ For example, <code><section></code> should be wrapped as inlin
  • Separated link
-
+ +
+
+
+ +
+ + +
+ 
-<div class="input-append">
-  <input id="appendedInputButtons" type="text">
-  <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>
@@ -1387,77 +1435,12 @@ For example, <code><section></code> should be wrapped as inlin
       ...
     </ul>
   </div>
+  <input type="text">
 </div>
-
-
-
-
- - -
- -
-
-
-<div class="input-prepend">
-  <div class="btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-  <input class="span2" id="prependedDropdownButton" type="text">
-</div>
-
- -
-
-
- - -
- -
- - -
-
-
-
-<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">
-      ...
-    </ul>
-  </div>
-  <input class="span2" id="appendedPrependedDropdownButton" type="text">
-  <div class="btn-group">
+<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>
@@ -1471,8 +1454,8 @@ For example, <code><section></code> should be wrapped as inlin
 
           
Segmented dropdown groups

           

-            

-              

+            

+              

                 
                 

               
             

-            

-              
-              

+
+            

+              
+              

                 
                 

           
 
-<form>
-  <div class="input-prepend">
-    <div class="btn-group">...</div>
-    <input type="text" class="span3">
-  </div>
-  <div class="input-append">
-    <input type="text" class="span3">
-    <div class="btn-group">...</div>
-  </div>
-</form>
+<div class="input-prepend">
+  <div class="btn-group">...</div>
+  <input type="text" class="span3">
+</div>
+<div class="input-append">
+  <input type="text" class="span3">
+  <div class="btn-group">...</div>
+</div>
 

 
           
Search form

diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache
index cf99025196..3bfbb0280f 100644
--- a/docs/templates/pages/css.mustache
+++ b/docs/templates/pages/css.mustache
@@ -1059,13 +1059,15 @@ For example, <code><section></code> should be wrapped as inlin
               
               

                 
+                

+                  
+                

               

             

             

               

-                
                 
               

             

@@ -1086,9 +1088,11 @@ For example, <code><section></code> should be wrapped as inlin
   </div>
   <div class="control-group">
     <div class="controls">
-      <label class="checkbox">
-        <input type="checkbox"> Remember me
-      </label>
+      <div class="checkbox">
+        <label>
+          <input type="checkbox"> Remember me
+        </label>
+      </div>
       <button type="submit" class="btn">Sign in</button>
     </div>
   </div>
@@ -1224,85 +1228,116 @@ For example, <code><section></code> should be wrapped as inlin
           
Extending form controls

           
Adding on top of existing browser controls, Bootstrap includes other useful form components.

 
-          
Prepended and appended inputs

-          
Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

-
-          
Default options

-          
Wrap an .add-on and an input with one of two classes to prepend or append text to an input.

+          
Input groups

+          
Add text or buttons before, after, or on both sides of any text-based input. Use .input-group with a .add-on to prepend or append elements to an <input>.

+          
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.

           

-            

-              @
-              
+            

+              @
+              
             

             

-            

-              
-              .00
+            

+              
+              .00
+            

+            

+            

+              $
+              
+              .00
             

           
 
-<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>
-<div class="input-append">
-  <input id="appendedInput" type="text">
-  <span class="add-on">.00</span>
-</div>
-

 
-          
Combined

-          
Use both classes and two instances of .add-on to prepend and append an input.

-          

-            

-              $
-              
-              .00
-            

-          

-
-<div class="input-prepend input-append">
-  <span class="add-on">$</span>
-  <input id="appendedPrependedInput" type="text">
-  <span class="add-on">.00</span>
+<div class="input-group span6">
+  <input type="text">
+  <span class="input-group-addon">.00</span>
+</div>
+
+<div class="input-group span3">
+  <span class="input-group-addon">$</span>
+  <input type="text">
+  <span class="input-group-addon">.00</span>
 </div>
 

 
           
Buttons instead of text

-          
Instead of a <span> with text, use a .btn to attach a button (or two) to an input.

+          
Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

           

-            

-              
-              
+            

+              
+                
+              
+              
+            

+            

+            

+              
+              
+                
+              
             

           
 
-<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>
+
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Go!</button>
+  </span>
 </div>
 

           

-            

-              
-              
-              
+            

+              
+              
+                
+                
+              
+            

+            

+            

+              
+                
+                
+              
+              
             

           
 
-<div class="input-append">
-  <input class="span3" id="appendedInputButton" type="text">
-  <button class="btn" type="button">Search</button>
-  <button class="btn" type="button">Options</button>
+<div class="input-group span7">
+  <input type="text">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+</div>
+
+<div class="input-group span7">
+  <span class="input-group-btn">
+    <button class="btn" type="button">Search</button>
+    <button class="btn" type="button">Options</button>
+  </span>
+  <input type="text">
 </div>
 

 
           
Button dropdowns

           

           

-            

-              
-              

+            

+              

                 
                 
    
                   
  • Action
    • 
@@ -1312,13 +1347,26 @@ For example, <code><section></code> should be wrapped as inlin
                   
  • Separated link
    • 
                 

               

-            

+              
+            

+            

+            

+              
+              

+                
+                
+              

+            

           
 
-<div class="input-append">
-  <input id="appendedInputButtons" type="text">
-  <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>
@@ -1327,77 +1375,12 @@ For example, <code><section></code> should be wrapped as inlin
       ...
     </ul>
   </div>
+  <input type="text">
 </div>
-

 
-          

-            

-              

-                
-                
-              

-              
-            

-          

-
-<div class="input-prepend">
-  <div class="btn-group">
-    <button class="btn dropdown-toggle" data-toggle="dropdown">
-      Action
-      <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-      ...
-    </ul>
-  </div>
-  <input class="span2" id="prependedDropdownButton" type="text">
-</div>
-

-
-          

-            

-              

-                
-                
-              

-              
-              

-                
-                
-              

-            

-          

-
-<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">
-      ...
-    </ul>
-  </div>
-  <input class="span2" id="appendedPrependedDropdownButton" type="text">
-  <div class="btn-group">
+<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>
@@ -1411,8 +1394,8 @@ For example, <code><section></code> should be wrapped as inlin
 
           
Segmented dropdown groups

           

-            

-              

+            

+              

                 
                 

               
             

-            

-              
-              

+
+            

+
+            

+              
+              

                 
                 

           
 
-<form>
-  <div class="input-prepend">
-    <div class="btn-group">...</div>
-    <input type="text" class="span3">
-  </div>
-  <div class="input-append">
-    <input type="text" class="span3">
-    <div class="btn-group">...</div>
-  </div>
-</form>
+<div class="input-prepend">
+  <div class="btn-group">...</div>
+  <input type="text" class="span3">
+</div>
+<div class="input-append">
+  <input type="text" class="span3">
+  <div class="btn-group">...</div>
+</div>
 

 
           
Search form

diff --git a/less/buttons.less b/less/buttons.less
index 92c9477aad..1133192926 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -16,6 +16,7 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
+  white-space: nowrap;
   .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
   border: 1px solid @btn-border;
   border-bottom-color: darken(@btn-border, 10%);
diff --git a/less/forms.less b/less/forms.less
index fe1bb9d408..a10e57d02f 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -421,273 +421,112 @@ select:focus:invalid {
 
 
 
-// INPUT GROUPS
-// ------------
 
-// Allow us to put symbols and text within the input field for a cleaner look
-.input-append,
-.input-prepend {
-  margin-bottom: 5px;
-  font-size: 0; // white space collapse hack
-  white-space: nowrap; // Prevent span and input from separating
+// Input groups
+// --------------------------------------------------
 
-  // Reset the white space collapse hack
-  input,
-  select,
-  .uneditable-input,
-  .dropdown-menu {
-    font-size: @font-size-base;
+// Base styles
+// -------------------------
+.input-group {
+  display: table;
+
+  // Undo padding and float of grid classes
+  &[class*="span"] {
+    float: none;
+    padding: 0;
   }
 
   input,
   select,
   .uneditable-input {
-    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
-    float: none; // Undo the float from grid sizing
-    margin: 0; // Prevent bottom margin from screwing up alignment in stacked forms
-    font-size: @font-size-base;
-    vertical-align: top;
-    border-radius: 0 @input-border-radius @input-border-radius 0;
-    // Make input on top when focused so blue border and shadow always show
-    &:focus {
-      z-index: 2;
-    }
-  }
-  input[class*="span"],
-  select[class*="span"],
-  .uneditable-input[class*="span"] {
-    margin: 0;
-  }
-  .add-on {
-    display: inline-block;
-    width: auto;
-    height: @line-height-base;
-    min-width: 16px;
-    padding: 6px;
-    font-size: @font-size-base;
-    font-weight: normal;
-    line-height: @line-height-base;
-    text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    background-color: @grayLighter;
-    border: 1px solid #ccc;
-  }
-  .add-on,
-  .btn,
-  .btn-group > .dropdown-toggle {
-    vertical-align: top;
-    border-radius: 0;
-  }
-  .active {
-    background-color: @state-success-background;
-    border-color: @state-success-text;
+    width: 100%;
   }
 }
 
-.input-prepend {
-  .add-on,
-  .btn {
-    margin-right: -1px;
-  }
-  .add-on:first-child,
-  .btn:first-child {
-    // FYI, `.btn:first-child` accounts for a button group that's prepended
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-  }
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-btn,
+.input-group input,
+.input-group .uneditable-input {
+  display: table-cell;
+  margin: 0;
+  border-radius: 0;
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-btn {
+  width: 1%;
+  vertical-align: middle; // Match the inputs
 }
 
-.input-append {
-  input,
-  select,
-  .uneditable-input {
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-    + .btn-group .btn,
-    + .btn-group .btn:last-child {
-      border-radius: 0 @input-border-radius @input-border-radius 0;
-    }
-  }
-  .add-on,
-  .btn,
-  .btn-group {
-    margin-left: -1px;
-  }
-  .add-on:last-child,
-  .btn:last-child,
-  .btn-group:last-child > .dropdown-toggle {
-    border-radius: 0 @input-border-radius @input-border-radius 0;
-  }
+// Text input groups
+// -------------------------
+.input-group-addon {
+  .box-sizing(border-box);
+  padding: 6px 8px;
+  font-size: @font-size-base;
+  font-weight: normal;
+  line-height: @line-height-base;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  background-color: @grayLighter;
+  border: 1px solid #ccc;
 }
 
-// Remove all border-radius for inputs with both prepend and append
-.input-prepend.input-append {
-  input,
-  select,
-  .uneditable-input {
-    border-radius: 0;
-    + .btn-group .btn {
-      border-radius: 0 @input-border-radius @input-border-radius 0;
-    }
-  }
-  .add-on:first-child,
-  .btn:first-child {
-    margin-right: -1px;
-    border-radius: @input-border-radius 0 0 @input-border-radius;
-  }
-  .add-on:last-child,
-  .btn:last-child {
-    margin-left: -1px;
-    border-radius: 0 @input-border-radius @input-border-radius 0;
-  }
-  .btn-group:first-child {
-    margin-left: 0;
+// Reset rounded corners
+.input-group input:first-child,
+.input-group .uneditable-input:first-child,
+.input-group-addon:first-child {
+  .border-left-radius(@border-radius-base);
+}
+.input-group-addon:first-child {
+  border-right: 0;
+}
+.input-group input:last-child,
+.input-group .uneditable-input:last-child,
+.input-group-addon:last-child {
+  .border-right-radius(@border-radius-base);
+}
+.input-group-addon:last-child {
+  border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-btn,
+.input-group-btn .btn {
+  white-space: nowrap;
+}
+.input-group-btn > .btn {
+  float: left; // Collapse white-space
+  border-radius: 0;
+  + .btn {
+    border-left: 0;
   }
 }
-
-
-
-
-// SEARCH FORM
-// -----------
-
-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; // Remove the default margin on all inputs
-  border-radius: @input-border-radius-search;
+.input-group-btn.btn-group {
+  display: table-cell;
 }
-
-/* Allow for input prepend/append in search forms */
-.form-search .input-append .search-query,
-.form-search .input-prepend .search-query {
-  border-radius: 0; // Override due to specificity
-}
-.form-search .input-append .search-query {
-  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
-}
-.form-search .input-append .btn {
-  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
-}
-.form-search .input-prepend .search-query {
-  border-radius: 0 @input-border-radius-search @input-border-radius-search 0;
-}
-.form-search .input-prepend .btn {
-  border-radius: @input-border-radius-search 0 0 @input-border-radius-search;
-}
-
-
-
-
-// HORIZONTAL & VERTICAL FORMS
-// ---------------------------
-
-// Common properties
-// -----------------
-
-.form-search,
-.form-inline,
-.form-horizontal {
-  input,
-  textarea,
-  select,
-  .help-inline,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
+// Prepend
+.input-group-btn {
+  &:first-child > .btn:last-child,
+  &.btn-group:first-child > .btn {
+    border-right: 0;
   }
-  // Re-hide hidden elements due to specifity
-  .hide {
-    display: none;
+  &:first-child > .btn:first-child,
+  &.btn-group:first-child > .btn {
+    border-radius: @border-radius-base 0 0 @border-radius-base;
   }
 }
-.form-search label,
-.form-inline label,
-.form-search .btn-group,
-.form-inline .btn-group {
-  display: inline-block;
-}
-// Remove margin for input-prepend/-append
-.form-search .input-append,
-.form-inline .input-append,
-.form-search .input-prepend,
-.form-inline .input-prepend {
-  margin-bottom: 0;
-}
-// Inline checkbox/radio labels (remove padding on left)
-.form-search .radio,
-.form-search .checkbox,
-.form-inline .radio,
-.form-inline .checkbox {
-  display: inline-block;
-  padding-left: 0;
-  label {
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-}
-// Remove float and margin, set to inline-block
-.form-search .radio input[type="radio"],
-.form-search .checkbox input[type="checkbox"],
-.form-inline .radio input[type="radio"],
-.form-inline .checkbox input[type="checkbox"] {
-  float: left;
-  margin-right: 3px;
-  margin-left: 0;
-}
-
-
-// Margin to space out fieldsets
-.control-group {
-  margin-bottom: @line-height-base / 2;
-}
-
-// Legend collapses margin, so next element is responsible for spacing
-legend + .control-group {
-  margin-top: @line-height-base;
-  -webkit-margin-top-collapse: separate;
-}
-
-// Horizontal-specific styles
-// --------------------------
-
-.form-horizontal {
-  // Increase spacing between groups
-  .control-group {
-    margin-bottom: @line-height-base;
-    .clearfix();
-  }
-  // Float the labels left
-  .control-label {
-    float: left;
-    width: @component-offset-horizontal - 20;
-    padding-top: 5px;
-    text-align: right;
-  }
-  // Move over all input controls and content
-  .controls {
-    margin-left: @component-offset-horizontal;
-  }
-  // Remove bottom margin on block level help text since that's accounted for on .control-group
-  .help-block {
-    margin-bottom: 0;
-  }
-  // And apply it only to .help-block instances that follow a form control
-  input,
-  select,
-  textarea,
-  .uneditable-input,
-  .input-prepend,
-  .input-append {
-    + .help-block {
-      margin-top: @line-height-base / 2;
-    }
-  }
-  // Move over buttons in .form-actions to align with .controls
-  .form-actions {
-    padding-left: @component-offset-horizontal;
+// Append
+.input-group-btn {
+  &:last-child > .btn:first-child,
+  &.btn-group:last-child > .btn:first-child {
+    border-left: 0;
+  }
+  &:last-child > .btn:last-child,
+  &.btn-group:last-child > .btn {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
   }
 }
diff --git a/less/variables.less b/less/variables.less
index 0d9b2c6632..4841d485fc 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -76,8 +76,8 @@
 // Buttons
 // -------------------------
 
-@btn-background:                     #fff;
-@btn-background-highlight:           darken(#fff, 10%);
+@btn-background:                     #fafafa;
+@btn-background-highlight:           darken(@btn-background, 10%);
 @btn-border:                         #bbb;
 
 @btn-backround-primary:              @link-color;