HTML doctype

Bootstrap makes use of certain HTML elements and CSS properties that require the use of HTML 5 doctype. By default, the view that you create in ASP.NET Core will have HTML 5 doctype only. So, we do not need to do anything regarding this.

 
<!DOCTYPE html> 
 
<html lang="en"> 
... 
</html>

Let us make the following changes to our screen to make use of Bootstrap:

  • Apply the CSS class form-horizontal to the form.
  • For the label, input, and validation error spans use the CSS col-sm-2, col-sm-4, and col-sm-3 classes respectively
  • For labels, apply the CSS class control-label
  • For input HTML elements, the form-control CSS class is applied
  • For each of the form groups (containing the HTML elements such as label and input), apply the CSS class form-group
  • For all validation error messages, apply the text-danger CSS class so that they will be shown in red
  • Apply the table, table-bordered CSS class to style the table

The following is the complete updated view code; we have used Bootstrap CSS classes to make our application look great:

@model Validation.ViewModels.EmployeeAddViewModel 
 
<div> 
    <br/> 
    <br/> 
    <form asp-controller="Employee" asp-action="Index" method="post" role="form" class="form-horizontal"> 
         
        <div class="form-group"> 
            <label asp-for="Name" class="col-sm-2 control-label"></label> 
            <div class="col-sm-4"> 
                <input asp-for="Name" class="form-control" /> 
            </div> 
            <div class="col-sm-3 text-danger"> 
                <span id="validationName" asp-validation-for="Name" ></span> 
            </div> 
        </div> 
 
        <div class="form-group"> 
            <label asp-for="Designation" class="col-sm-2 control-label"></label> 
            <div class="col-sm-4"> 
                <input asp-for="Designation" class="form-control" /> 
            </div> 
            <div class="col-sm-3 text-danger"> 
                <span id="validationDesignation" asp-validation-for="Designation" ></span> 
            </div> 
        </div> 
 
 
        <div class="form-group"> 
            <label asp-for="Salary" class="col-sm-2 control-label"></label> 
            <div class="col-sm-4"> 
                <input asp-for="Salary" class="form-control" /> 
            </div> 
            <div class="col-sm-3 text-danger"> 
                <span id="validationSalary" asp-validation-for="Salary" ></span> 
            </div> 
        </div> 
 
        <div class="form-group"> 
            <div class="col-sm-offset-2 col-sm-10"> 
                <button type="submit" class="btn btn-primary">Submit</button> 
            </div> 
        </div> 
 
         
    </form> 
    
</div> 
 
<br /><br /> <br /> 
 
<h4> List of employees:</h4> <br /> 
 
    <table class="table table-bordered"> 
        <tr> 
            <th> ID </th> 
            <th> Name </th> 
            <th> Designation </th> 
            <th> Salary </th> 
        </tr> 
        @foreach (var employee in Model.EmployeesList) 
        { 
            <tr> 
                <td>@employee.EmployeeId</td> 
                <td>@employee.Name</td> 
                <td>@employee.Designation</td> 
                <td>@employee.Salary</td> 
            </tr> 
        } 
    </table>

After making the preceding changes, when you run the application, your screen should look something like the following:

HTML doctype

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset