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

Code Explanation

From the code above:

• In line 13: We can observe the input-group in the class attribute of the div tag. This is a wrapper for the input tag.

• In line 14: The input-group-prepend is the class attribute of a div tag that is used to wrap the prepend text to the input tag.

• In line 15: We use the input-group-text to append the @ sybol to the html ìnput field.

• In line 17: We then use the input field with class="form-control"

Do not forget to add the css link and the script link as this the only way you allow bootstrap add styling to your page