# Bootstrap Input Group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

## Example

### Default

@
@example.com
Your vanity URL https://example.com/users/
$
Copy

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

    <div class="input-group input-group-dynamic mb-4">
      <input type="text" class="form-control" 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>

    <div class="input-group input-group-dynamic mb-4">
      <label class="form-label" for="basic-url">Your vanity URL</label>
      <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
      <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" onfocus="focused(this)" onfocusout="defocused(this)">
    </div>

    <div class="input-group input-group-dynamic mb-4">
      <span class="input-group-text">$</span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    </div>

## Sizing

Large
Default
Small
Copy

    <div class="input-group input-group-lg input-group-outline my-3">
      <label class="form-label">Large</label>
      <input type="text" class="form-control form-control-lg">
    </div>

    <div class="input-group input-group-outline my-3">
      <label class="form-label">Default</label>
      <input type="text" class="form-control">
    </div>

    <div class="input-group input-group-sm input-group-outline my-3">
      <label class="form-label">Small</label>
      <input type="text" class="form-control form-control-sm">
    </div>