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.

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.

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 with Bootstrap Input Groups

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.

Output

Adding Button Addon with Bootstrap Input Groups

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.

Output

Adding Dropdowns with Bootstrap Input Groups

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

.

Output

Adding Segmented Dropdowns with Bootstrap 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.

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

Output

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

Reference
Getbootstrap Doc

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.