Bootstrap 3 with ASP.NET MVC 5 – Step by Step

UPDATE 18 Aug 2016: An updated version of this article is available at Bootstrap 3 With MVC 5 And Entity Framework 6 Database First using Visual Studio 2015, MVC 5, Bootstrap 3.3.7 and EF 6 with more details on using Bootstrap classes in HTML helper controls.

In Visual Studio 2013, Microsoft has added Twitter Bootstrap as its default MVC user interface framework. It also has the current version of Bootstrap (3.0.0). In this article, I’ll walk you through the steps to use the default bootstrap version 3 available in Visual Studio 2013. Also guide you to change the default bootstrap user-interface layout to another one.

Overview of this article:

• Creating MVC 5 Project in Visual Studio 2013.
• Using Bootstrap 3.
• Changing the default Bootstrap layout to another.

Tools and Technologies used:

• Visual Studio Express 2013 for Web.
• .Net Framework 4.5.1.
• MVC 5
• Bootstrap 3 UI Framework.
• Bootstrap fluid layout template from here.

Sample Source Code:

The sample source code, project created with this step by step instruction is available in GitHub. Download the sample code from here.

Steps for using Bootstrap 3 with ASP.NET MVC 5:

I. Creating MVC 5 Project:

1. Launch Visual Studio 2013 (I’ve used Visual Studio Express 2013 for Web).
2. Go to File menu and select New Project…
3. Create a new ASP.NET Web Application project.
   
4. In the next screen, select MVC as the template and click OK.
   
5. The project and the solution are created.

II. Default Bootstrap in VS 2013:

1. To verify bootstrap version, expand the Scripts folder and open and see the version number in the bootstrap file.
2. The bootstrap.js and css files are seen as below.
   
3. The bootstrap version is visible below the license text.
   
4. 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.
   

III. Change the default Bootstrap layout:

1. The default bootstrap template used in Visual Studio 2013 is Jumbotron. Jumpotron’s original source code is available here in bootstrap website.
2. For this sample, to get used to the bootstrap classes, we’ll change this template to another one.
3. Let’s use the Justified-Nav template from bootstrap website. You can get the HTML code from here. Justified-Nav is also a fluid layout template which will re-align itself for the screen size.
4. The Justified-Nav template needs extra style sheet (justified-nav.css). You can get it from the bootstrap website from here. (or you can download it from my github repository)
5. Add the style sheet justified-nav.css to the Content folder.
   
6. Open the BundleConfig.cs file under the App_Start folder.
   
7. Add the justified-nav.css to the “~/Content/css” style bundle.
   
8. Now, open the layout file _Layout.cshtml in the Shared folder under Views Folder.
   
9. Remove the section within the div tag with class=”navbar navbar-inverse navbar-fixed-top”.
   
10. Place the below code instead. (You can copy the source code from my GitHub repository).
    
11. Open the Index.cshtml file in the Home folder under Views.
    
12. Change the class (“col-lg-4“) of div wrapping the sub headings from medium 4 columns to large 4 columns (“col-lg-4“).
    
13. Now the sample is ready.
14. Build the solution and execute. You will get the new bootstrap 3 layout in ASP.NET MVC 5. As seen in the below screen shots, the layout is fluid and re-align itself based on the display size.

    

    

NOTE: The project created with this step by step instruction is available in GitHub. Download the sample code from here.

To read my other articles on Bootstrap, go here.