From Visual Studio 2013, when creating an ASP.NET project, you only have one project template to choose from, that is, the ASP.NET Web Application project template, as shown in the following screenshot:
In the New ASP.NET Project dialog, you have a choice to select the type of ASP.NET web application you would like to create. To create an ASP.NET MVC web app that uses Bootstrap for its styling and layout, select the MVC template. You'll notice that the MVC checkbox is automatically selected, as shown in the following screenshot:
Click on the OK button to finish the creation of the MVC project in Visual Studio. You'll notice that the project template automatically adds a number of NuGet packages to your project, including the Bootstrap NuGet package.
The default project template adds all the necessary Bootstrap files we discussed earlier, although it does not use the same folder naming convention as the default Bootstrap distribution. The default project layout will look similar to the following screenshot:
The
Content folder contains both the bootstrap.css and bootstrap.min.css files as well as a style sheet called Site.css. This file is used to apply any additional styling on top of the default styles provided by Bootstrap, and it is also used to specify the styles to use for the jQuery validation plugin required by ASP.NET MVC for form validation. For example, the following CSS highlights any input element with a reddish color and draws a border around the element if the validation for that field failed:
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}The
Scripts folder contains a number of scripts. Most notably for this book, it contains the bootstrap.js and bootstrap.min.js JavaScript files. The default ASP.NET MVC project template also adds both minified and normal files for the following JavaScript libraries and plugins:
jQuery
jQuery validation plugin
jQuery and jQuery validation support library for unobtrusive validation
Modernizr
Respond JS
Visual Studio enables intelliSense for jQuery, Bootstrap, and Modernizr as well as responds by adding the _reference.js file to the Scripts folder. This is a very useful feature when working with JavaScript and well worth using when working with the Bootstrap components.
Most of these libraries and files are beyond the scope of this book, but we will touch on some of them as we progress.