Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Avoid using <textarea> elements here as their rows attribute will not be respected in some cases.
When using tooltips or popovers on elements within an .input-group, you'll 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).
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.
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 (visible <label> elements, <label> elements hidden using the .sr-only class, or use of the aria-label, aria-labelledby, aria-describedby, title or 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, case-specific approaches.
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username">
<div class="input-group-append">
<div class="input-group-text">@example.com</div>
</div>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<div class="input-group-text">.00</div>
</div>
</div>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.
<div class="input-group">
<span class="input-group-prepend">
<button class="btn btn-light" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown">Action</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control">
</div>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-light">Action</button>
<button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control">
</div>