twitter/bootstrap — Issue #2185: Form field grouping
Author: r1ch0
Created: 2012-02-23 00:25:28+00:00
State: open

At present, there is `.input-prepend` and `.input-append`, allowing an element to be either added to the start or end of a field. There's also been a request to support both prepending *and* appending to the same field.

I'd like to see a more generic approach (if possible), where all elements (`input`, `span`, `button`, `a`, etc.) within a common `div` are grouped in a similar way to the current prepend/append style. That is, only the first and last child of the `div` have the rounded corners and `.add-on`s have a grey background, etc.

As an example, the following code:

```html

@

```

would render as if it were one long field with five sub-parts. The two `input`s would have the usual white background, the `span`s would have a grey background, and the `button` would have a blue background. Only the first and last sub-elements would have rounded corners.

Also, perhaps there could be an additional class that when placed on the outer `div`, draws the focus border around the whole group instead of on the individual focused element. I assume there might be mixed opinions on this functionality so it should probably be an optional class.