Share via

ASP.NET MVC 5 - Bootstrap 3.0 in 3 Steps

  • Article

Introduction

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

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.

http://code.msdn.microsoft.com/site/view/file/115861/1/1.png

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

http://code.msdn.microsoft.com/site/view/file/115862/1/2.png

Upgrade version if necessary

You can verify the version of bootstrap using these two ways.

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

http://code.msdn.microsoft.com/site/view/file/115863/1/3.png

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

http://code.msdn.microsoft.com/site/view/file/115864/1/4.png

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

http://code.msdn.microsoft.com/site/view/file/115865/1/5.png

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

http://code.msdn.microsoft.com/site/view/file/115866/1/6.png

  • 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

http://code.msdn.microsoft.com/site/view/file/115867/1/7.png

  • 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:

http://code.msdn.microsoft.com/site/view/file/115868/1/9.png

This is the sample after our changes:

http://code.msdn.microsoft.com/site/view/file/115870/1/10.png

http://code.msdn.microsoft.com/site/view/file/115871/1/11.png

Resources

Download code from here: Sample Code

See Also