Bootstrap 5 Input Groups

Group form controls and text together on a single line.

Input groups enable you to combine form controls and text on the same line. They are similar to button groups in the sense that, they allow you to align the elements flush against each other.

View Output

To create an input group, use Bootstrap's .input-group class for the actual input group. For an element to be prepended or appended to the form control, use a <span> with the .input-group-text class.

Text on Both Sides

You can also prepend an element to the form control. In fact you can have text on both sides of the control.

View Output

Size

Use either .input-group-sm or .input-group-lg on the input group to specify the size of all elements. No need to specify these on each element in the group.

View Output

Checkboxes & Radio Buttons

You can place checkboxes and radio buttons instead of text.

View Output

Button Addons

You can also add buttons to the form control instead of text.

View Output

Dropdowns

You can add dropdown menus to the input group.

View Output