Bootstrap 4 Components

Input Groups

Input groups allow you to combine text and form controls on a single line.

To do this you need class .input-group to the create the input group and .input-group-addon for the element you want to combine with that input.

Input group with a single addon


Input group with addons on both sides

$ .00

Input group with more than one addons or either side

$ .00


Use classes .input-group-lg or .input-group-sm to the to the input group and the contents of the input group will automatically resize themselves according to the size of the input group.


Radio inputs and Checkboxes as addon

Instead of text, use radio button or a checkbox to an inputs addon.

Buttons as Addon

When using buttons as addons in an input group the buttons must be wrapped inside the class .input-group-btn. Like text Addons you can add multiple button addons on either side of the input.

Add a dropdown into the addon button by including a dropdown menu in the button.