Bootstrap Input Group

Easily extend form controls with Bootstrap input, 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/

$ .00

With textarea

<div class="form-group">
    <div class="input-group">
        <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>

<div class="form-group">
    <div class="input-group">
      <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>

<div class="form-group">
    <label class="form-control-label" for="basic-url">Your vanity URL</label>
    <div class="input-group">
      <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">
    </div>
</div>

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

<div class="form-group">
    <div class="input-group">
      <span class="input-group-text">With textarea</span>
      <textarea class="form-control" aria-label="With textarea"></textarea>
    </div>
</div>

Sizing

Small

Default

Large

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

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

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

Multiple inputs

First and last name

<div class="input-group">
  <span class="input-group-text">First and last name</span>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

Multiple addons

$ 0.00

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

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

Button addons

<div class="input-group mb-3">
  <button class="btn btn-outline-primary mb-0" type="button" id="button-addon1">Button</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-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="button-addon2">
  <button class="btn btn-outline-primary mb-0" type="button" id="button-addon2">Button</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-outline-primary mb-0" type="button">Button</button>
  <button class="btn btn-outline-primary mb-0" type="button">Button</button>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <button class="btn btn-outline-primary mb-0" type="button">Button</button>
  <button class="btn btn-outline-primary mb-0" type="button">Button</button>
</div>