Input Groups

An input group attaches extra content directly to the edge of a .form-control — a unit label, a currency symbol, or a whole button — so it visually reads as one connected control instead of two separate elements sitting side by side.

1. Basic Input Group: .input-group + .input-group-addon

Wrap the input and one or more <span class="input-group-addon"> elements in a <div class="input-group">. An addon can go before the input, after it, or both, and it fuses visually with the input's border so there's no gap between them.

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Trail pass price">
  <span class="input-group-addon">.00</span>
</div>

2. Button Add-ons: .input-group-btn

To attach a whole <button> instead of plain text, wrap it in <span class="input-group-btn"> rather than .input-group-addon — this keeps the button's own styling (color, hover state) intact while still fusing it to the input's edge.

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search trails">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">
      <span class="glyphicon glyphicon-search"></span>
    </button>
  </span>
</div>

3. Sizing: .input-group-lg / .input-group-sm

Add .input-group-lg or .input-group-sm to the outer .input-group div itself (not the input) to resize the whole group — input, addons and attached button all scale together and stay visually matched.

<div class="input-group input-group-lg">
  <span class="input-group-addon">mi</span>
  <input type="text" class="form-control">
</div>

4. Worked Example: TrailMap Distance Input & Search Bar

Two real TrailMap fields: a distance input with a "mi" unit addon on the right, and a search bar with a magnifying-glass button attached on the right instead of a plain addon.

<!-- Distance filter with a unit suffix -->
<div class="form-group">
  <label for="maxDistance">Max distance</label>
  <div class="input-group">
    <input type="text" class="form-control" id="maxDistance" value="5">
    <span class="input-group-addon">mi</span>
  </div>
</div>

<!-- Search bar with an attached button -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search trails">
  <span class="input-group-btn">
    <button class="btn btn-primary" type="button">
      <span class="glyphicon glyphicon-search"></span> Search trails
    </button>
  </span>
</div>