Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

ASP.NET MVC 5 - Bootstrap 3.0 in 3 Steps

0.00/5 (No votes)
3 Oct 2014 1  
This tip walks you through the steps for creating a ASP.NET MVC 5 Web Application using Bootstrap as template for layout.

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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:

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here