Input groups let you extend form controls by adding text, icons, or buttons on either side. Wrap your control and addons inside a .input-group div. Use .input-group-text for text/icon addons.
You can add multiple addons on each side and even embed buttons or dropdowns directly inside the input group. Add .input-group-sm or .input-group-lg to the container for sizing.
<!-- Text addon -->
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<!-- Button addon -->
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search...">
<button class="btn btn-primary">Go</button>
</div>
<!-- Both sides -->
<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="number" class="form-control" placeholder="Amount">
<span class="input-group-text">.00</span>
</div>Use input groups for search bars (button addon), currency fields ($ prefix + .00 suffix), and URL inputs (https:// prefix) to give contextual visual cues.