Input Groups in Bootstrap with Examples

Input Groups in Bootstrap are used to extend the default form controls by adding text or buttons on either side of textual inputs, custom file selectors, or custom inputs.

Basic input groups: The following classes are the base classes that are used to add the groups to either side of the input boxes. 

• The .input-group-prepend class is used to add groups to the front of the input.
• The .input-group-append class is used to add it behind the input.
• The .input-group-text class is used to style the text that is displayed inside the group.

The following example demonstrates these input groups: 

Output:

👁 Prepend and Append

Sizing of the Input Groups

The input groups could be made larger or smaller by additional classes. There are 3 possible sizes of input groups:

• The .input-group-sm class is used for a smaller size.
• The .input-group-lg class is used for a larger size.
• The .input-group class is the default size.

Note: Sizing on the individual input group elements isn’t currently supported.

Example:

Output:

👁 Sizing of input groups

Using Multiple Inputs: Multiple inputs could be used with input groups.

Example:

Output:

👁 Multiple Inputs

Using Multiple Addons: Multiple addons could be stacked or mixed together with other types, including checkboxes and radio buttons.

Example:

Output:

👁 Multiple Addons

Using Button Addons: Buttons could also be appended or prepended to the input box.

Example:

Output:

👁 Multiple Buttons

Using Custom Select: Input groups could be used with custom select.

Note: Browser default versions of custom select are not supported.

Example:

Output:

👁 Custom Select

Using Custom File Input: Input groups could be used with custom file inputs.

Note: Browser default versions of file inputs are not supported.

Example:

Output:

👁 Custom File