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-group itself 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.

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.