Bootstrap for ASP.NET MVC

Do not be alarmed with the amount of files inside the css folder. This folder contains four .css files and two .map files. We would only need to include the bootstrap.css file in our project for the Bootstrap styles to be applied to our pages. The bootstrap.min.css file is simply a minified version of the aforementioned file.

The .map files can be ignored for the project we'll be creating. These files are used as a type of debug symbol (similar to the .pdb files in Visual Studio), which allow developers to live edit their preprocessor source files—something which is beyond the scope of this book.

Bootstrap uses Font Awesome to display various icons and glyphs in Bootstrap sites. Font Awesome was designed specifically for Bootstrap and the fonts folder contains the following four different formats of the font files:

It is a good idea to include all these files in your web project as this will enable your site to display the fonts correctly in different browsers.

The js folder contains two files. All the Bootstrap plugins are contained in the bootstrap.js file. The bootstrap.min.js file is simply a minified version of the aforementioned file. Before including the file in your project, make sure that you have a reference to the jQuery library because all Bootstrap plugins require jQuery.

The default project template automatically adds the jQuery library to your project and creates a bundle for it. The jQuery bundle will be included in your pages if you have the following line of code inside your view:

@Scripts.Render("~/bundles/jquery")

The unzipped folder structure for Bootstrap will look something like the following screenshot:

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:

.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;
}

To add the Bootstrap style sheet files to your project, complete the following steps:

Add the required Bootstrap fonts by performing the following steps:

The final Bootstrap file we'll need is bootstrap.js. To add it, perform the following steps:

One option for adding the Bootstrap NuGet package to your project is to use the Manage NuGet Packages dialog box. To access the Manage NuGet Packages dialog and add the Bootstrap NuGet package, perform the following steps:

The second method of adding NuGet packages to your Visual Studio project is via the Package Manager Console and completing the following steps:

Because we created an empty ASP.NET MVC site, the necessary reference for adding bundling was not automatically added to our project. Luckily, this can easily be added by using the NuGet Package Manager Console as follows:

To include the bundles we created earlier in our Layout file, perform the following steps:

In order to enable bundling and minification, open the Web.config file inside the root of your project and change the debug attribute of the compilation element to true as follows:

<system.web>
  <compilation debug="true" targetFramework="4.5" />
  <httpRuntime targetFramework="4.5" />
</system.web>

The same can be achieved by setting the EnableOptimizations property of the BundleTable object to true. This statement can either be added to the Global.asax file's Application_Start method or to the RegisterBundles method of the BundleConfig class as follows:

BundleTable.EnableOptimizations = true;

After you've added references to the bundles inside your Layout file and set either the debug attribute or the EnableOptimizations property to true, build and run your project. Once the site is open in a browser, view its source. You should see a markup similar to the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
    <link href="/bootstrap/css?v=Tmmo-oSKW9MFWr7qyt2LfyMD1tap2GokH7z1W2bhfgY1" rel="stylesheet"/>
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>  
<h2>Index</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/bootstrap/js?v=raqa-So7giLQpXYq5LQiW8D-yNoxOAJewB8VXtgFHfE1"></script>
</body>
</html>

Note that the highlighted lines contain the relative paths we've specified in our bundles and when clicking on, for example, the /bootstrap/js link, the browser will open a minified version of the Bootstrap JavaScript file. You can see it is minified because most white spaces and line breaks have been removed. The code will also be a combination of the Bootstrap JavaScript file as well as any other JavaScript files, which we might have added to the bundle.