How to use bootstrap input-group

Overview

While working with input fields, we might want to make it more interactive and intuitive, making users know that they are doing the right thing and helping them ease the process of submitting or filling out a form. The bootstrap input-group helps to do that.

What is input-group?

The input-group is a tag class that bootstrap uses to append or prepend text to an input HTML form tag.

Furthermore, the input-group class is a wrapper to improve the input form fields by prepending or appending an icon, text, or a button to the input form field.

• The input-group-prepend class adds the group in front of the input.

• The input-group-prepend class adds the group behind or at the back of the input.

• The input-group-text class styles the text inside the group.

Example