Input groups

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" ...

Get Bootstrap for ASP.NET MVC - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.