Input groups are another way to provide the user with additional information about the data you expect them to enter in a specific form element. Bootstrap provides classes to add sections either before or after an input element. These sections can contain either text or an icon.

To create a text input element to indicate to the user that we require them to enter a phone number into the field, we'll use the following markup:

@model Chapter3.Models.PersonModel 
<div class="container"> 
    <div class="row"> 
        <div class="col-md-6"> 
            <label asp-for="Phonenumber" class="col-md-4 control-label">
            </label> 
            <div class="input-group"> 
                <span class="input-group-addon" id="PhoneNumber">
                <i class="fa fa-phone"></i></span> 
                <input asp-for="Phonenumber" class="form-control"
                 placeholder="Phone number"/> 
            </div> 
        </div> 
    </div> 
</div> 

The result of the preceding markup will be a text input element with a gray section to its left with an image of a telephone inside it, as illustrated in the following image:

You can also create input groups that are aligned on the right-hand side of text inputs and that contain text instead of images. For example, the following markup creates a text input field that indicates to the user that only the first part of an e-mail address is required and that the last part will automatically be appended:

<div class="row"> 
    <div class="col-md-6"> 
        <label asp-for="Email" class="col-md-4 control-label"></label> 
        <div class="input-group"> 
            <input asp-for="Email" class="form-control" placeholder="Email
             address" /> 
            <span class="input-group-addon" id="Email">@@northwind.com</span> 
        </div> 
    </div> 
</div> 
 

The result of the preceding markup will look like the following image inside your browser:

You can also create a text input with a gray section on both sides with the following code:

<div class="row"> 
    <div class="col-md-6"> 
        <label asp-for="Salary" class="col-md-4 control-label"></label> 
        <div class="input-group"> 
            <span class="input-group-addon">$</span> 
            <input type="text" class="form-control"> 
            <span class="input-group-addon">.00</span> 
        </div> 
    </div> 
</div> 

In the preceding code, we created a text input with a gray section with a dollar sign on the left side and a gray section on the right containing .00 . This will indicate to the user that we expect a round number and that the system always expects zero decimals: