Creating a Bootstrap Project with an Example
In this part of the blog, we will focus on creating a bootstrap project and adding it to ASP.NET.
- First, create the new project by selecting from the file menu.
2. Now select the MVC type of ASP.NET as shown below:
3. After clicking the following is the project structure:
Downloading CSS and JavaScript File for Bootstrap
- Go to the reference folder, then go to Find Manage NuGet Packages, and click on that option.
- Now install the bootstrap packages
- Now bootstrap will be installed automatically.
- Their script folder will contain the javascript files of bootstrap, and the content folder will contain the CSS file of bootstrap.
Example
We have created the folder till now. Now we will focus on the Login.cshtml file. We will use some bootstrap classes like "row" and"col-md-8".
@using MvcApplicationDemo.Models
@model LoginViewModel
@{
ViewBag.Title = "Log in";
}
<h2>@ViewBag.Title.</h2>
<div class="row">
<div class="col-md-8">
<section id="loginForm">
FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl },
{
@Html.AntiForgeryToken()
<hr />
<h4>Use a account to log in.</h4>
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<div class="col-md-10">
@Html.LabelFor(m => m.Email, new { @class = "col-md-3 control-label" })
@Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
@Html.TextBoxFor(m => m.Email, new { @class = "formcontrol" })
</div> </div>
<div class="form-group">
@Html.LabelFor(m => m.password, new { @class = "col-md-3control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.Password, new { @class = "formcontrol" })
@Html.ValidationMessageFor(m => m.Password, "", new { @class = "textdanger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
@Html.CheckBoxFor(m => m.RememberMe)
</div>
</div>
</div>
<div class="formgroup">
<div class="col-md-offset-2 colmd-10">
<input type="submit" value="Log" class="btn btndefault" />
</div>
</div>
@Html.ActionLink("Register here as a new user", "Register")
<p>
@Html.ActionLink("Forgot password?", "Forgot Password")
</p>*@
}
</section>
</div>
<div class="col-md-4">
<section id="socialLoginForm">
</section>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
If you look at the view source of the Login.cshtml page, you will see that the bootstrap files are included. The following page will look like this.:
FAQs
-
What are responsive websites?
These websites can be used on any screen size, and they can respond according to the request.
-
Write some of the features of bootstrap.
It is a free front-end framework and easy to use.
-
What is server Control?
It is a feature provided in ASP.NET which offers facilities to the manipulated values of the control server-side.
-
Name different types of Server controls that ASP.NET supports?
HTML server control, web Server Control, User Server Control, and many more.
Key Takeaways
In this blog, we have learned about what bootstrap is and how it is used in the MVC framework in ASP.NET. Along with that also have a brief idea about the MVC framework, and we have also seen how to create a bootstrap project, for example.
If you want to learn about scaffolding in ASP.NET, then you must read this blog. Here you will get a complete overview of the topic from scratch, like creating a project to create and edit a scaffold.
Also, see What is .Net, Bootstrap Accordion
Apart from this, you can also expand your knowledge by referring to these articles on Features Of ASP Net and ASP Full Form.
251+ registered 
