Input groups

Input group basic

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

Sizing

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

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

Buttons 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.