BS5 Input Group

Basic input group

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Prefix and suffix

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="text" class="form-control" placeholder="Amount">
  <span class="input-group-text">.00</span>
</div>

Input group with button

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-outline-secondary" type="button">Go</button>
</div>

Checkbox or radio inside input group

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" aria-label="Checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Task name">
</div>

Input group sizing

<div class="input-group input-group-lg mb-3">...</div>
<div class="input-group input-group-sm mb-3">...</div>

Best practices

• Use input groups for short prefixes like currency or icons
• Avoid stacking too many add-ons, it becomes hard to read
• Keep placeholders short