Input Group

Input Group

.input-group is a flex row that joins a control to text (.input-group-text), buttons or a small checkbox before or after it, squaring the inner corners so the pieces read as one field.

Prefix, suffix, button and checkbox addonsHTMLLive

<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<div class="p-3 vstack gap-2">
  <div class="input-group">
    <span class="input-group-text">$</span><input class="form-control" value="25" aria-label="Sum">
    <span class="input-group-text">.00</span><button class="btn btn-outline-secondary">Pay</button>
  </div>
  <div class="input-group input-group-sm">
    <div class="input-group-text"><input class="form-check-input mt-0" type="checkbox"></div>
    <input class="form-control" placeholder="Coupon code" aria-label="Coupon code">
  </div>
</div>

Browser output of Listing 3.38 — Browser output of 38

Keep labels outside the group. Size the whole group with .input-group-sm or -lg, add .flex-nowrap to stop wrapping, and add .has-validation when it holds feedback (Validation).

MENU