Extend form controls by adding text or buttons before, after, or on both sides
of any text-based
.input-group with an
to prepend or append elements to a single .form-control.
<select> elements here as they cannot be fully styled in
<textarea> elements here as their rows attribute will not be
respected in some cases.
Tooltips & popovers in input groups require special setting
When using tooltips or popovers on elements within an
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.
Always add labels
Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
The exact technique to be used (
<label> elements hidden using the
or use of the
placeholder attribute) and what additional information will need to be
conveyed will vary depending on the exact type of interface widget you're
implementing. The examples in this section provide a few suggested,
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.
Checkboxes and radio addons
Place any checkbox or radio option within an input group's addon instead of text.
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
to wrap the buttons. This is required due to default browser styles that
cannot be overridden.