ASP.NET MVC 5 - Bootstrap 3.0 in 3 Steps

• Download source code

Introduction

This tip walks you through the steps for creating a ASP.NET MVC 5 Web Application using Bootstrap as template for layout.

STEP 1 - Create ASP.NET Web Application

• Open Visual Studio 2013 and create a new project of type ASP.NET Web Application.
• On this project, I create a solution called MVCBootstrap.

• Press OK, and a new screen will appear, with several options of template to use on our project.
• Select the option MVC.

STEP 2 - Upgrade Version if Necessary

You can verify the version of bootstrap on two ways.

First one, accessing the files on Content or Scripts folder. If open for example the file Bootstrap.css, we can check that the version of bootstrap is the 3.0.0.

Another way to verify the bootstrap version is to check the installed NuGet package.

• Right click the solution and select Manage NuGet packages for solution.. option.
• In the Manage NuGet screen, select Installed Packages section.
• Then select the bootstrap package in the center pane to see the version details.

As you see, the version is 3.0.0.

STEP 3 - Change Layout

The default bootstrap template used in Visual Studio 2013 is Jumbotron. Jumpotron’s original source code is available here in bootstrap website.

On this sample, we will change this template to the Justified-Nav one. So for that, do the next steps:

• Add the style sheet justified-nav.css to the Content folder

• Open the BundleConfig.cs file under the App_Start folder.
• Add the justified-nav.css to the “~/Content/css” style bundle.

• Now, open the layout file _Layout.cshtml in the Shared folder under Views Folder
• Remove the section within the div tag with class=”navbar navbar-inverse navbar-fixed-top

• Open the Index.cshtml file in the Home folder under Views
• Change the class col-md-4 to col-lg-4
• Now the sample is ready.

This is the sample created with solution:

This is the sample after our changes: