Bootstrap 3 Input groups
- Extend form controls by adding text or buttons before, after, or on both sides of any text-based
<input>
. Use.input-group
with an.input-group-addon
or.input-group-btn
to prepend or append elements to a single.form-control
.
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.
The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".
The .input-group-addon class attaches an icon or help text next to the input field.
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2"> <span class="input-group-addon" id="basic-addon2">@example.com</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"> <span class="input-group-addon">.00</span> </div> <label for="basic-url">Your vanity URL</label> <div class="input-group"> <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span> <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3"> </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-lg"> <span class="input-group-addon" id="sizing-addon1">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div> <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> <div class="input-group input-group-sm"> <span class="input-group-addon" id="sizing-addon3">@</span> <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3"> </div>
Checkboxes and radio addons
Place any checkbox or radio option within an input group's addon instead of text.
<div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..."> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> <div class="col-sm-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> </div><!-- /.row -->
Button addons
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. This is required due to default browser styles that cannot be overridden.
<div class="row"> <div class="col-sm-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for..."> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> <div class="col-sm-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> </div><!-- /.row -->
Buttons with dropdowns
<div class="row"> <div class="col-sm-6"> <div class="input-group"> <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"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> <input type="text" class="form-control" aria-label="..."> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> <div class="col-sm-6"> <div class="input-group"> <input type="text" class="form-control" aria-label="..."> <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><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> </div><!-- /.row -->
Segmented buttons
<div class="row"> <div class="col-sm-6"> <div class="input-group"> <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"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </div><!-- /btn-group --> <input class="form-control" aria-label="Text input with segmented button dropdown"> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> <div class="col-sm-6"> <div class="input-group"> <input 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><a href="#">Something else here</a> </li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a> </li> </ul> </div><!-- /btn-group --> </div><!-- /input-group --> </div><!-- /.col-sm-6 --> </div><!-- /.row -->
Multiple buttons
While you can only have one add-on per side, you can have multiple buttons inside a single .input-group-btn
.
<div class="row"> <div class="col-sm-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default" aria-label="Bold"><span class="glyphicon glyphicon-bold"></span></button> <button type="button" class="btn btn-default" aria-label="Italic"><span class="glyphicon glyphicon-italic"></span></button> </div> <input class="form-control" aria-label="Text input with multiple buttons"> </div> </div> <div class="col-sm-6"> <div class="input-group"> <input class="form-control" aria-label="Text input with multiple buttons"> <div class="input-group-btn"> <button type="button" class="btn btn-default" aria-label="Help"><span class="glyphicon glyphicon-question-sign"></span></button> <button type="button" class="btn btn-default">Action</button> </div> </div> </div> </div>