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.
    MVC5-BootStrap3-001
  4. In the next screen, select MVC as the template and click OK.
    MVC5-BootStrap3-002
  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.
    MVC5-BootStrap3-002a
  3. The bootstrap version is visible below the license text.
    MVC5-BootStrap3-003
  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.
    MVC5-BootStrap3-003a

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.
    MVC5-BootStrap3-004
  6. Open the BundleConfig.cs file under the App_Start folder.
    mvc5-BootStrap3-005
  7. Add the justified-nav.css to the “~/Content/css” style bundle.
    MVC5-BootStrap3-006
  8. Now, open the layout file _Layout.cshtml in the Shared folder under Views Folder.
    MVC5-BootStrap3-007
  9. Remove the section within the div tag with class=”navbar navbar-inverse navbar-fixed-top”.
    MVC5-BootStrap3-008
  10. Place the below code instead. (You can copy the source code from my GitHub repository).
    MVC5-BootStrap3-009
  11. Open the Index.cshtml file in the Home folder under Views.
    MVC5-BootStrap3-010
  12. Change the class (“col-lg-4“) of div wrapping the sub headings from medium 4 columns to large 4 columns (“col-lg-4“).
    MVC5-BootStrap3-011
  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

    MVC5-BootStrap3-013

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.

 


21 thoughts on “Bootstrap 3 with ASP.NET MVC 5 – Step by Step”

  1. Hi

    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?

    thanks
    Kalyan

    Reply
  2. 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?

    Reply
  3. 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

    Reply

Leave your thoughts...

This site uses Akismet to reduce spam. Learn how your comment data is processed.