Bootstrap 4 Input Group

Bootstrap 4 Input Group is the form control created by adding text, buttons on either side of inputs, custom selects, custom file inputs, and help texts.

Basic Input Group Prepend and Append in Bootstrap 4

Input groups are created by placing them inside the container with class .input-group. Inside that container, you have to use the class .input-group-prepend to place the help text before the input. While you can use the class .input-group-append to place the addons and help text after the input.

Inside these prepend and append classes, use the <span> element and add class .input-group-text to style the help text or icon.

Output

Sizing Input Groups in Bootstrap 4

To set the height and sizing the input groups, you can use sizing classes like .input-group-sm, .input-group, and .input-group-lg. When using the sizing classes, there is no need for repeating the form control size classes on each element.

The class .input-group creates a default size input group without the need of adding the sizing classes to get the default size.

Output

The above example shows the three sizings of the input group. Out of them, the middle input group shows the default size.

Placing Checkboxes and Radio Buttons in Input Groups

You can use the checkboxes and radio button in place of text content in input groups. Place the radio buttons and checkboxes inside the class .input-group-text as given below:

Output

Creating Multiple Inputs and addons

The multiple inputs addons are the adding multiple inputs and help texts side-by-side as given below. You can multiple inputs and multiple addons or help text.

Output

In the above example, the first input group contains single text with multiple inputs. While the second input group shows multiple addons or help text with a single input.

Button addons Input Groups

You can add buttons and inputs together in place of text content. It requires adding single or multiple buttons in the prepend and append container with the single input after or before it.

Output

Placing Button Dropdowns in Input Groups

When you want to perform more than one action in an input group, you can use the dropdowns. You don’t need to use the .dropdown wrapper class as it is normally required to create dropdowns.

Output

The above example shows the dropdowns added before or after the inputs.

Segmented Dropdown Buttons in Input Groups

The segmented dropdowns contain links that are separated by buttons. You can place segmented dropdowns with inputs to make input groups.

Output

Custom Forms in Input Groups

You can place custom select options in input groups with text or buttons. The buttons and texts are placed before or after the custom select options.

Output

Custom File Inputs in Input Groups

You can place custom file uploads with help texts to give hints to users. It can also contain buttons before or after the custom file inputs.

Output