Bootstrap 3 with ASP.

NET MVC 5 – Step

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