Bootstrap 4 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.
To create an input group, use Bootstrap's
.input-group class for the actual input group, then use
.input-group-addon on the element that you want to append or prepend to the form control.
Note that input groups are designed for textual
<input> elements only.
Text on Both Sides
You can also place text on both sides of the control.
.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.
Checkboxes & Radio Buttons
You can place checkboxes and radio buttons instead of text.
You can also add buttons to the form control instead of text.
This requires another
<span> element nested inside the input group with a class of
You can add dropdown menus to the input group.
You can also add split dropdowns to the input group.