You can easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. See the examples.

Detailed documentation and more examples you can find in our Bootstrap Input fields Docs


Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.

@
@example.com
https://example.com/users/
$ .00
@
With textarea

No border

Add .border-0 class to the .input-group-text to remove the border.

@
@example.com
https://example.com/users/
$ .00
With textarea