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>