<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
    aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

          

<label class="text-dark font-weight-medium" for="">Left checkbox addon</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <label class="control control-checkbox d-inline-block mb-0">
        <input type="checkbox" name="checkbox1" />
        <div class="control-indicator"></div>
      </label>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<label class="text-dark font-weight-medium" for="">Left Radio addon</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <label class="control control-radio d-inline-block mb-0">
        <input type="radio" name="radio1" />
        <div class="control-indicator"></div>
      </label>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>


          

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">Action</button>
    <div 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>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
      aria-expanded="false">Action</button>
    <div 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>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

          

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text mdi mdi-account" id="basic-addon1"></span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="settings" aria-label="Recipient's username"
    aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text mdi mdi-settings" id="basic-addon2"></span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text mdi mdi-home" id="basic-addon3"><span class="ml-2">example.com</span></span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text mdi mdi-email"></span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text mdi mdi-map-marker"></span>
  </div>
</div>

          

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">go</button>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Search for...">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-secondary" type="button">go</button>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="Search for...">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="settings" aria-label="Recipient's username"
    aria-describedby="basic-addon2" placeholder="Search for...">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">go</button>
  </div>
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="settings" aria-label="Recipient's username"
    aria-describedby="basic-addon2" placeholder="Search for...">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">go</button>
  </div>
</div>

          

<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text mdi mdi-account" id="basic-addon1"></span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text mdi mdi-account" id="basic-addon1"></span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group input-group-lg mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text mdi mdi-account" id="basic-addon1"></span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>