Bootstrap 3 Input Groups

Group form controls and text together on a single line.

Input groups enable you to combine form controls and text on the same line. They are similar to button groups in the sense that, they allow you to align the elements flush against each other.

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

To create an input group, use Bootstrap's .input-group class for the actual input group, then use .input-group-addon on the element that you want to append or prepend to the form control.

Note that input groups are designed for textual <input> elements only.

Text on Both Sides

You can also place text on both sides of the control.

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

Icons

You can also use glyphicons in the text field.

<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true">
</span>
</span>	
<input type="tel" class="form-control" aria-label="Phone Number" placeholder="Phone number">
</div>

Size

Use either .input-group-sm or .input-group-lg on the input group to specify the size of all elements. No need to specify these on each element in the group.

<div class="input-group input-group-sm">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true">
</span>
</span>	
<input type="tel" class="form-control" aria-label="Phone Number" placeholder="Small">
</div>

<div class="input-group input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true">
</span>
</span>	
<input type="tel" class="form-control" aria-label="Phone Number" placeholder="Default size">
</div>

<div class="input-group input-group-lg">
<span class="input-group-addon">
<span class="glyphicon glyphicon-phone-alt" aria-hidden="true">
</span>
</span>	
<input type="tel" class="form-control" aria-label="Phone Number" placeholder="Large">
</div>

<style scope>
div {margin: 10px;}
</style>

Checkboxes & Radio Buttons

You can place checkboxes and radio buttons instead of text.

<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>

<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>

<style scope>
div {margin: 10px;}
</style>

Button Addons

You can also add buttons to the form control instead of text.

This requires another <span> element nested inside the input group with a class of .input-group-btn.

<div class="input-group">
<input type="search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true">
</span> Search!</button>
</span>
</div>

Dropdowns

You can add dropdown menus to the input group.

<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>

Split Dropdowns

You can also add split dropdowns to the input group.

<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>