Extend form controls by adding text or buttons before, after, or on both sides of any text-based
.input-group with an
.input-group-btn to prepend or append elements to a single
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
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.
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.
While you can only have one add-on per side, you can have multiple buttons inside a single