<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>

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

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

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

  <input class="form-control" id="basic-url" type="text" aria-describedby="basic-addon3" />
</div>
<div class="input-group mb-3">
  <span class="input-group-text">$</span>

  <input class="form-control" type="text" aria-label="Amount (to the nearest dollar)" />
  <span class="input-group-text">.00</span>
</div>
<div class="input-group">
  <span class="input-group-text">With textarea</span>

  <textarea class="form-control" aria-label="With textarea"></textarea>.
</div>

<div class="input-group flex-nowrap">
  <span class="input-group-text" id="addon-wrapping">@</span>

  <input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
</div>

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>

  <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />

</div>
<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>

  <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" />
</div>
<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>

  <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
</div>

<div class="input-group mb-3">
  <div class="input-group-text">

    <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input" />
  </div>

  <input class="form-control" type="text" aria-label="Text input with checkbox" />
</div>
<div class="input-group">
  <div class="input-group-text">

    <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input" />
  </div>

  <input class="form-control" type="text" aria-label="Text input with radio button" />
</div>

<div class="input-group">
  <span class="input-group-text">First and last name</span>

  <input class="form-control" type="text" aria-label="First name" />

  <input class="form-control" type="text" aria-label="Last name" />
</div>

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>

  <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
</div>
<div class="input-group">

  <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>