Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual <input>s.

Page Demo

Basic Example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

<!-- On left -->
<div class="input-group form-group">
    <div class="input-group-prepend">
        <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
    <i class="form-group__bar"></i>
</div>

<!-- On right -->
<div class="input-group form-group">
    <input type="text" class="form-control" placeholder="Username">
    <div class="input-group-prepend">
        <span class="input-group-text">@</span>
    </div>
    <i class="form-group__bar"></i>
</div>

<!-- On both sides -->
<div class="input-group form-group">
    <div class="input-group-prepend">
        <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
    <div class="input-group-prepend">
        <span class="input-group-text">@</span>
    </div>
    <i class="form-group__bar"></i>
</div>

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize. No need for repeating the form control size classes on each element.

<div class="input-group input-group-sm">
    <div class="input-group-prepend">
        <span class="input-group-text">Small</span>
    </div>
    <input type="text" class="form-control">
    <i class="form-group__bar"></i>
</div>

<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">Default</span>
    </div>
    <input type="text" class="form-control">
    <i class="form-group__bar"></i>
</div>

<div class="input-group input-group-lg">
    <div class="input-group-prepend">
        <span class="input-group-text">Large</span>
    </div>
    <input type="text" class="form-control">
    <i class="form-group__bar"></i>
</div>