Bootstrap Input Groups

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.

Test it Live

Output



@example.com

$

.00

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.

Test it Live

Output



@example.com

$

.00



@example.com

$

.00



@example.com

$

.00

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.

Test it Live

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.

Test it Live

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

.

Test it Live

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.

Test it Live

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.

Test it Live

Output











The above example can be used to put the save, update and delete button with the input box using the Bootstrap input group.