Input Group

<!-- Addon on the Left -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fe-icon-lock"></i></span>
  </div>
  <input class="form-control" type="password" placeholder="Password">
</div>

<!-- Addon on the Right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Recipient's e-mail">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

<!-- Addon on Both Sides -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fe-icon-dollar-sign"></i></span>
  </div>
  <input class="form-control" type="text" placeholder="Amount">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<!-- Icon Addon (Textarea) -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fe-icon-message-square"></i></span>
  </div>
  <textarea class="form-control" placeholder="Type your message here..." rows="6"></textarea>
</div>

<!-- Text Addon (Select) -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Options</span>
  </div>
  <select class="form-control">
    <option>Choose one...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

<!-- Checkbox Addon (Text Input) -->
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-control custom-checkbox">
        <input class="custom-control-input" type="checkbox" id="ex-check-1">
        <label class="custom-control-label" for="ex-check-1"></label>
      </div>
    </div>
  </div>
  <input class="form-control" type="text" placeholder="Checkbox here">
</div>

<!-- Radio Button Addon (Text Input) -->
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-control custom-radio">
        <input class="custom-control-input" type="radio" id="ex-radio-1" name="radio">
        <label class="custom-control-label" for="ex-radio-1"></label>
      </div>
    </div>
  </div>
  <input class="form-control" type="text" placeholder="Radio button here">
</div>

<!-- Multiple Inputs -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First &amp; last name</span>
  </div>
  <input class="form-control" type="text" placeholder="First name">
  <input class="form-control" type="text" placeholder="Last name">
</div>

<!-- Multiple Addons on the Left -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fe-icon-dollar-sign"></i></span>
    <span class="input-group-text">.00</span>
  </div>
  <input class="form-control" type="text" placeholder="Amount">
</div>

<!-- Multiple Addons on the Right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Amount">
  <div class="input-group-append">
    <span class="input-group-text"><i class="fe-icon-dollar-sign"></i></span>
    <span class="input-group-text">.00</span>
  </div>
</div>

<!-- Button Addon on the Left -->
<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">Button</button>
  </div>
  <input class="form-control" type="text" placeholder="Button on the left">
</div>

<!-- Multiple Button Addons -->
<div class="input-group">
  <input class="form-control border-right-0" type="text" placeholder="Buttons on the right">
  <div class="input-group-append">
    <button class="btn btn-secondary" type="button"><i class="fe-icon-edit text-lg"></i></button>
    <button class="btn btn-success" type="button"><i class="fe-icon-check-circle text-lg"></i></button>
    <button class="btn btn-danger" type="button"><i class="fe-icon-trash-2 text-lg"></i></button>
  </div>
</div>

<!-- Dropdown Addon on the Right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Dropdown on the right">
  <div class="input-group-append">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</button>
    <nav class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </nav>
  </div>
</div>

<!-- Input Group Light Skin -->
<div class="input-group input-group-light-skin">
  <div class="input-group-prepend">
    <span class="input-group-text"><i class="fe-icon-lock"></i></span>
  </div>
  <input class="form-control" type="password" placeholder="Password">
</div>