# Input groups

Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use `.input-group` with an `.input-group-addon` to prepend or append elements to a single `.form-control`.

#### Cross-browser compatibility

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

#### Tooltips & popovers in input groups require special setting

When using tooltips or popovers on elements within an `.input-group`, you'll have to specify the option `container: 'body'` to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

#### Don't mix with other components

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

## Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

We do not support multiple add-ons on a single side.

We do not support multiple form-controls in a single input group.

@
.00
$ .00
{% highlight html %}
@
.00
$ .00
{% endhighlight %}

## Sizing

Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

@
@
@
{% highlight html %}
@
@
@
{% endhighlight %}

## Checkboxes and radio addons

Place any checkbox or radio option within an input group's addon instead of text.

{% highlight html %}
{% endhighlight %}

## Button addons

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.

{% highlight html %}
{% endhighlight %}

## Buttons with dropdowns

{% highlight html %}
{% endhighlight %}

## Segmented buttons

{% highlight html %}
{% endhighlight %}