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:

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.
    Bootstrap 3 with MVC 5

    Bootstrap 3 with MVC 5


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.


19 comments for “Bootstrap 3 with ASP.NET MVC 5 – Step by Step

  1. Zeev
    August 22, 2015 at 1:06 am

    Really? This is an exact copy taken from

    You did not even change a single word or screenshot. Shame on you.

  2. Arun
    July 8, 2015 at 3:33 pm

    Style of Active tab is not applying

  3. Vishvvas
    April 8, 2015 at 3:58 pm

    Simple and easy to understand post…Thanks!!!

  4. Lasa
    January 19, 2015 at 10:55 pm

    Good article

  5. January 17, 2015 at 12:13 pm

    Excellent post. Very helpfull

  6. January 15, 2015 at 11:04 am

    Very nice article to understand.

  7. imformis
    August 21, 2014 at 9:16 am

    That is great…i was lost…didnt even guess where to start…thanks a ton

  8. August 13, 2014 at 10:22 am

    Thanh you so much.

  9. Slini
    June 26, 2014 at 11:58 pm

    Good one.

  10. April 22, 2014 at 7:27 am


    Thanks for sharing the post. Is there a way to switch the bootstrap themes for mvc website using simple configuration?

    if yes, can it be personalised to the user?


  11. March 14, 2014 at 5:24 am

    Great Tutorial! Please check our Bootstrap 3 Responsive Website Tutorial at http://

  12. peterloudon
    February 17, 2014 at 3:00 pm

    Is there a walkthrough for implementing a theme from bootswatch or wrapbootstrap in an MVC 5 project?

  13. January 31, 2014 at 2:09 pm

    Thanks for sharing this example. I have noticed some odd behavior with Bootstrap 3 header and nav. For example, if you scale down the size of the browser window, then click the About button, the app logo and main menu shift to the left a few pixels. If you then click on the Home button, the app logo and menu shift back to the right. Any idea what is causing this?

    • awdawd
      March 13, 2014 at 10:36 am

      scroll bar duh

  14. Paul Harding
    January 21, 2014 at 12:56 pm

    why? why! why! do MS always want to try and push you a way! Do we all want to spend time making it not look like every body else’s? It has cost me many hours, best to start clean with MVC IMO and make your own call

  15. dfgdfg
    December 30, 2013 at 4:12 am


Leave your thoughts...