Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.
Place one add-on or button on either side of an input. You may also place one on both sides of an input. We do not support multiple form-controls in a single input group.
<div class="form-group">
<label for="">Name label</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="icon icon-user"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="icon icon-email-envelope"></span></span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">@domain.com</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><span class="icon icon-vote-star"></span></span>
<input type="text" class="form-control" placeholder="Your favorite color" aria-label="Amount (to the nearest dollar)">
</div>
<br>
<div class="input-group disabled">
<span class="input-group-addon"><span class="icon icon-cloud-disable"></span></span>
<input type="text" class="form-control" value=".input-group.disabled > input[disabled]" disabled>
</div>Initialize all input groups addons on a dynamically loaded page. Select only .form-control elements.
$(function () {
$("#loaded-elements .form-control").inputGroupAddon();
})
Add the relative form sizing classes to the .input-group itself and contents within will automatically resize.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<br>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>Place any checkbox or radio option within an input group’s addon instead of text.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input id="checkbox1" class="form-check-input" type="checkbox" value="">
<label class="form-check-label" for="checkbox1"></label>
</span>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input id="radio1" class="form-check-input" type="radio" value="">
<label class="form-check-label" for="radio1"></label>
</span>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
</div>
</div>Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input id="checkbox3" class="form-check-input" type="checkbox" value="">
<label class="form-check-label" for="checkbox3"></label>
</span>
<span class="input-group-addon">R$</span>
<input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">R$</span>
<span class="input-group-addon">0.00</span>
<input type="text" class="form-control" aria-label="Text input with radio button">
</div>
</div>
</div>Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you’ll need to use .input-group-btn to wrap the buttons.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go <span class="icon icon-paperplane"></span></button>
</span>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Hate it</button>
</span>
<input type="text" class="form-control" placeholder="Product name">
<span class="input-group-btn">
<button class="btn btn-accent" type="button">Love it</button>
</span>
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go horse</button>
</span>
<input type="text" class="form-control" placeholder="Domain">
</div>
</div>
</div>Use .rounded
<div class="form-group">
<label for="">Name label</label>
<div class="input-group rounded">
<span class="input-group-addon" id="basic-addon1"><span class="icon icon-user"></span></span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
</div>
<div class="input-group rounded">
<span class="input-group-addon"><span class="icon icon-email-envelope"></span></span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">@domain.com</span>
</div>
<br>
<div class="input-group rounded">
<span class="input-group-addon"><span class="icon icon-user"></span></span>
<input type="text" class="form-control" placeholder="Kill who?" aria-label="Amount (to the nearest dollar)">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go <span class="icon icon-paperplane"></span></button>
</span>
</div>
<br>
<div class="input-group rounded disabled">
<span class="input-group-addon"><span class="icon icon-cloud-disable"></span></span>
<input type="text" class="form-control" value=".input-group.disabled > input[disabled]" disabled>
</div><div class="row">
<div class="col-lg-6">
<div class="input-group rounded">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
<div class="col-lg-6">
<div class="input-group rounded">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go <span class="icon icon-paperplane"></span></button>
</span>
</div>
</div>
</div><div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>