Bootstrap input group is the feature of bootstrap to group the input types with just adding the predefined classes. This can be useful when you want to create a search input box or any other user inputs.
Bootstrap Input Groups to Create Basic Grouping
You can add icons before or after the inputs in groups by putting them inside the <div> element with the class .input-group.
Also, the icon should be wrap inside the <span> with class input-group-addon. See the example below to create an input group with icons.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<form> <div class="row"> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter the keyword"> <span class="input-group-addon"><i class="fa fa-search"></i></span> </div> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter your Email"> <span class="input-group-addon">@example.com</span> </div> </div> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">.00</span> </div> </div> </div> </form> |
Output
In the above example, you can use the left side input groups as the search input box of your website.
Sizing of Bootstrap Input Group
If you want to create your input groups and resize it to larger, medium or smaller, you have to use .input-group-lg, .input-group-md and .input-group-sm. However, you cannot use class .input-group-xs to resize the input groups.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<form> <div class="row"> <div class="col-md-4"> <div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder="Enter the keyword"> <span class="input-group-addon"><i class="fa fa-search"></i></span> </div> </div> <div class="col-md-4"> <div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder="Enter your Email"> <span class="input-group-addon">@example.com</span> </div> </div> <div class="col-md-4"> <div class="input-group input-group-lg"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">.00</span> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="input-group input-group-md"> <input type="text" class="form-control" placeholder="Enter the keyword"> <span class="input-group-addon"><i class="fa fa-search"></i></span> </div> </div> <div class="col-md-4"> <div class="input-group input-group-md"> <input type="text" class="form-control" placeholder="Enter your Email"> <span class="input-group-addon">@example.com</span> </div> </div> <div class="col-md-4"> <div class="input-group input-group-md"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">.00</span> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder="Enter the keyword"> <span class="input-group-addon"><i class="fa fa-search"></i></span> </div> </div> <div class="col-md-4"> <div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder="Enter your Email"> <span class="input-group-addon">@example.com</span> </div> </div> <div class="col-md-4"> <div class="input-group input-group-sm"> <span class="input-group-addon">$</span> <input type="text" class="form-control" placeholder="Enter Amount"> <span class="input-group-addon">.00</span> </div> </div> </div> </form> |
Output
Check the size of each input groups made by the use of the above given classes.
Adding checkboxes and Radio Buttons to Input Groups in Bootstrap
You can create an input box with the radio buttons and checkboxes in a single line. To do this, you have to put the checkbox and radio buttons inside the class .input-group-addon.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<form> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> </div> <div class="col-md-6"> <div class="input-group"> <span class="input-group-addon"> <input type="radio"> </span> <input type="text" class="form-control"> </div> </div> </div> </form> |
Output
Button Addon in Input Groups in Bootstrap
To add buttons to the input groups, you have to put the <button> inside the <span> element with class .input-group-btn.
You can use this as a search input box for your website. User enters the keyword into the input box and click on the “Go” button to get the search result.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<form> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default">Go</button> </span> <input type="text" class="form-control" placeholder="Enter keyword"> </div> </div> <div class="col-md-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter keyword"> <span class="input-group-btn"> <button type="button" class="btn btn-default">Go</button> </span> </div> </div> </div> </form> |
Output
Adding Dropdowns in Input Groups in Bootstrap
In addition to all these given above, you can also add input groups with the Bootstrap dropdown buttons in single line.
Append or prepend the dropdown to the input box by wrapping the dropdown button inside the <div> element with the class .input-group-btn
.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<form> <div class="row"> <div class="col-md-6"> <div class="input-group"> <div class="input-group-btn"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> <input type="text" class="form-control" placeholder="Enter keyword"> </div> </div> <div class="col-md-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter keyword"> <div class="input-group-btn"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> </div> </div> </div> </form> |
Output
Segmented Dropdowns in Input Groups
You can place other buttons with the dropdown buttons using one more button without the .dropdown-toggle and other attributes.
See the example below to create a segmented dropdown with input groups.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<form> <div class="row"> <div class="col-md-6"> <div class="input-group"> <div class="input-group-btn"> <a href="#" class="btn btn-default">Action</a> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> <input type="text" class="form-control" placeholder="Enter keyword"> </div> </div> <div class="col-md-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter keyword"> <div class="input-group-btn"> <a href="#" class="btn btn-default">Action</a> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </div> </div> </div> </div> </form> |
Output
Adding Multiple Buttons Bootstrap Input Groups
You can also add multiple buttons to the input group. Put the multiple buttons inside the <span> element with the class .input-group-btn.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<form> <div class="row"> <div class="col-md-6"> <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default"><i class="fa fa-floppy-o"></i></button> <button type="button" class="btn btn-default"><i class="fa fa-pencil-square-o"></i></button> <button type="button" class="btn btn-default"><i class="fa fa-remove"></i></button> </span> <input type="text" class="form-control" placeholder="Enter keyword"> </div> </div> <div class="col-md-6"> <div class="input-group"> <input type="text" class="form-control" placeholder="Enter keyword"> <span class="input-group-btn"> <button type="button" class="btn btn-default"><i class="fa fa-floppy-o"></i></button> <button type="button" class="btn btn-default"><i class="fa fa-pencil-square-o"></i></button> <button type="button" class="btn btn-default"><i class="fa fa-remove"></i></button> </span> </div> </div> </div> </form> |
Output
The above example can be used to put the save, update and delete button with the input box using the Bootstrap input group.