Input Groups

An input group lets you attach text, an icon, or a button directly to the side of a field — a "$" before a price, a unit after a number, or a "Search" button glued to a search box. Bootstrap builds all of it from one wrapper class, .input-group, plus .input-group-text for the non-input pieces. This lesson wires it up for TrailMap's distance field and its trail search box.

Basic Input Groups: .input-group and .input-group-text

Wrap the input and its add-on(s) in .input-group. Each add-on itself gets .input-group-text. Order matters: an add-on placed before the input prepends it, one placed after appends it.

<!-- TrailMap: distance in miles, unit appended -->
<div class="input-group">
  <input type="number" class="form-control" aria-label="Trail distance">
  <span class="input-group-text">mi</span>
</div>

Attaching Buttons to an Input Group

A <button> can sit directly inside an .input-group in place of a plain .input-group-text span — Bootstrap gives it matching borders and corner rounding automatically, no extra class needed on the button itself beyond its usual .btn classes.

<!-- TrailMap: search trails, button attached on the right -->
<div class="input-group">
  <input type="search" class="form-control" placeholder="Search trails..." aria-label="Search trails">
  <button class="btn btn-primary" type="button">Search</button>
</div>

Multiple Prepends and Appends

Stack more than one add-on on either side by placing several .input-group-text elements next to each other before and/or after the input — useful when a single unit label isn't enough context on its own.

<!-- TrailMap: elevation gain, with a label and a unit -->
<div class="input-group">
  <span class="input-group-text">Gain</span>
  <input type="number" class="form-control" aria-label="Elevation gain">
  <span class="input-group-text">m</span>
  <span class="input-group-text">above sea level</span>
</div>

Sizing Input Groups

Size the whole group at once by adding .input-group-lg or .input-group-sm to the wrapper — you don't need to size each child separately, the group class cascades the right padding and font size down to every input, add-on, and button inside it.

<div class="input-group input-group-lg">
  <input type="number" class="form-control" aria-label="Trail distance">
  <span class="input-group-text">mi</span>
</div>

Worked Example: Distance in Miles and a Trail Search Box

The two TrailMap fields from this lesson, side by side as they'd appear on the trail listing toolbar:

<div class="row g-3">
  <div class="col-sm-4">
    <div class="input-group">
      <span class="input-group-text">Max</span>
      <input type="number" class="form-control" aria-label="Max distance">
      <span class="input-group-text">mi</span>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="input-group">
      <input type="search" class="form-control" placeholder="Search trails..." aria-label="Search trails">
      <button class="btn btn-primary" type="button">Search</button>
    </div>
  </div>
</div>

Note the aria-label on each input — an input group's add-on text is not a real <label>, so screen reader users still need an accessible name set directly on the field.

Next up: Input groups are one way to combine a label with a field. See the alternative, newer approach in Floating Labels next.