Extend form controls by adding text or buttons before, after, or on both sides of any text-based input, select or file input. Use .input-group with an .input-group-text to prepend or append elements to a single or multiple .form-control and .form-select elements. Place one add-on or button on either side of an input. You may also place one on both sides of an input. While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.

Optional buttons as addons. Buttons in input groups are a bit different and don't require one extra level of nesting. Instead of wrapping the buttons in .input-group-text, you need to add button markup as-is before or after form inputs. Input group buttons support all available button options except sizing - all buttons height will be adjusted automatically according to the input group size.

You can also use selects instead of regular inputs and also mix them in different order. Selects in input group don't require any additional wrappers and/or specific class names, it works out of the box and logic is similar to input fields. Just add <select> element markup with .form-select class inside .input-group or mix it with other elements such as buttons, file/text inputs or text addons.

You can also use file inputs instead of regular inputs and also mix them in different order. File inputs in input group don't require any additional wrappers and/or specific class names, it works out of the box and logic is similar to input fields. Just add a regular file input type markup with .form-control class inside .input-group or mix it with other elements such as buttons, selects, text inputs or text addons.