ASP.Net MVC Bootstrap

by Online Tutorials Library July 14, 2022

ASP.NET MVC Bootstrap

Bootstrap is a popular web framework which is used to create responsive web application that can run even on the mobile device. It provides HTML, CSS and JavaScript libraries to build applications.

ASP.NET MVC, by default supports Bootstrap and use it’s libraries to create frontend of the application. Let?s create a MVC project and examine its libraries.

First create a project by selecting from the file menu.

ASP Bootstrap 1

Select the type of web project.

ASP Bootstrap 2

Select template for the web application. We are selecting MVC.

ASP Bootstrap 3

After clicking ok, it will create a project that has following structure.

ASP Bootstrap 4

The Script folder of the project includes the Bootstrap JavaScript libraries. Our project includes the following JavaScript files.

ASP Bootstrap 5

The Content folder contains Bootstrap CSS files. Our project contains the following files.

ASP Bootstrap 6

To see the uses of these CSS classes, click on the login link at top right corner of the web page. This will redirect to the login page that has a form to be filled. This form contains HTML components that are organized in a layout with the help of CSS classes.

Take a closer look at the source code of the Login.cshtml file. This file uses CSS classes like row, col-md-8 etc.

// Login.cshtml

 @using MvcApplicationDemo.Models @model LoginViewModel @{     ViewBag.Title = “Log in”; } <h2>@ViewBag.Title.</h2> <div class=”row”>     <div class=”col-md-8″>         <section id=”loginForm”>             @using (Html.BeginForm(“Login”, “Account”, new { ReturnUrl = ViewBag.ReturnUrl },              FormMethod.Post, new { @class = “form-horizontal”, role = “form” }))             {                 @Html.AntiForgeryToken()                 <h4>Use a local account to log in.</h4>                 <hr />                 @Html.ValidationSummary(true, “”, new { @class = “text-danger” })                 <div class=”form-group”>                     @Html.LabelFor(m => m.Email, new { @class = “col-md-2 control-label” })                     <div class=”col-md-10″>                         @Html.TextBoxFor(m => m.Email, new { @class = “form-control” })                         @Html.ValidationMessageFor(m => m.Email, “”, new { @class = “text-danger” })                     </div>                 </div>                 <div class=”form-group”>                     @Html.LabelFor(m => m.Password, new { @class = “col-md-2 control-label” })                     <div class=”col-md-10″>                         @Html.PasswordFor(m => m.Password, new { @class = “form-control” })                         @Html.ValidationMessageFor(m => m.Password, “”, new { @class = “text-danger” })                     </div>                 </div>                 <div class=”form-group”>                     <div class=”col-md-offset-2 col-md-10″>                         <div class=”checkbox”>                             @Html.CheckBoxFor(m => m.RememberMe)                             @Html.LabelFor(m => m.RememberMe)                         </div>                     </div>                 </div>                 <div class=”form-group”>                     <div class=”col-md-offset-2 col-md-10″>                         <input type=”submit” value=”Log in” class=”btn btn-default” />                     </div>                 </div>                 <p>                     @Html.ActionLink(“Register as a new user”, “Register”)                 </p>                 @* Enable this once you have account confirmation enabled for password reset functionality                     <p>                         @Html.ActionLink(“Forgot your password?”, “ForgotPassword”)                     </p>*@             }         </section>     </div>     <div class=”col-md-4″>         <section id=”socialLoginForm”>             @Html.Partial(“_ExternalLoginsListPartial”, new ExternalLoginListViewModel { ReturnUrl = ViewBag.ReturnUrl })         </section>     </div> </div> @section Scripts {     @Scripts.Render(“~/bundles/jqueryval”) } 

If we look at the view source of the Login.cshtml page, it shows that the Bootstrap libraries are linked to the web page. The following two screenshots shows that.

ASP Bootstrap 7
ASP Bootstrap 8

Next TopicASP.NET MVC Routing

ASP.Net MVC Bootstrap

ASP.NET MVC Bootstrap

// Login.cshtml

Artificial Neural Network Tutorial

AutoCAD Polar Array

You may also like