<div><label>Front & Back Add-ons - .input-group-addon</label></div>
<div class="row">
  <div class="col-lg-4">
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Recipient's username">
      <span class="input-group-addon">@example.com</span>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-addon">.00</span>
    </div>
  </div>
</div>
<hr>
<div><label>Input Group Sizes - .input-group-{size}</label></div>
<div class="row">
  <div class="col-lg-3">
    <div class="input-group input-group-lg">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
  <div class="col-lg-3">
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
  <div class="col-lg-3">
    <div class="input-group input-group-sm">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
  <div class="col-lg-3">
    <div class="input-group input-group-xs">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" placeholder="Username">
    </div>
  </div>
</div>
<hr>
<div><label>Input Widget Add-ons</label></div>
<div class="row">
  <div class="col-lg-4">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">Go!</button>
        </span>
    </div>
  </div>
</div>
<hr>

<div class="row">
  <div class="col-lg-4">
    <div class="input-group">
      <span class="input-group-addon">
        <%= fa_icon "phone" %>
      </span>
      <input type="text" class="form-control" placeholder="phone #">
    </div>
  </div>
  <div class="col-lg-4">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
        <span class="input-group-btn">
          <button class="btn btn-primary" type="button">Go!</button>
        </span>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="input-group">
      <span class="input-group-btn">
        <button type="button" class="btn btn-secondary">
          <%= fa_icon "link" %>
        </button>
      </span>
      <input type="text" class="form-control" placeholder="phone #">
    </div>
  </div>
</div>