Transform ASP.NET MVC3 Default Template with Twitter Bootstrap

This article is for beginners to demonstrate a way to beautify the default MVC3 template using Twitter Bootstrap.

Introduction

The ASP.NET MVC3 default template from Visual Studio 2010 is a very useful tool for developers to create something very quickly by offering a structured project template.
Twitter Bootstrap has also gained a lot of popularity for offering a simple framework for HTML, CSS, and
JavaScript by enabling the developers for creating some cool visual effects very easily.
This article talking about mixing these two tools together to begin building on it.

Background

There are a number of cases where its necessary to make something ready very quickly to give a demonstration to the client. ASP.NET MVC3 default template that comes with Visual Studio 2010 gives a good start up for having a basic template for a web application to start building on. While the template is correct with its look and feel as it concentrate on the MVC3 architecture and rightfully leaves the presentation details on the developers, I felt a nicer UI will impress the client more. During prototyping, we can't invest much time on this aspect. Bootstrap from Twitter
offers this help for creating some nicer looking UI quickly.

Using the code

1. Create a new ASP .NET MVC3 project

This is the basic step which really does not need much explanation. We'll start by creating a new ASP .NET Web project by selecting the ASP.NET MVC3 Web Application Template from Visual Studio 2010.

I named my project as MVC3Bootstrap. I used Internet application template with Razor view engine.

2. Download Bootstrap from Twitter

Bootstrap offers a lot of customization option to suit your needs. You pick and choose from the components, plugins etc. Also, you can choose to customize a lot of styling options by providing values in the appropriate less variables. The site is very well documented to explain what you need to change to get your desired effect. e.g. to change the color of my navigation bar from the default black, I changed the value of the variables @navbarBackground, @navbarBackgroundHighlight, @navbarText, @navbarLinkColor, @navbarLinkColorHover, @navbarLinkColorActive with my desired shades. For the purpose of this article we will not go into the individual customization options but downloaded the whole bundle.

Bootstrap download included the following Javascript files -

bootstrap.js

bootstrap.min.js

CSS files -

bootstrap.css

bootstrap.min.css

bootstrap.responsive.css

bootstrap-responsive.min.css

image files -

glyphicons-halflings.png

glyphicons-halflings-white.png

3. Adding the Twitter UI framework to our project

I created a folder named "bootstrap" under the Scripts folder in my project template and added the
JavaScript files mentioned above in the folder.

I created a folder named "bootstrap" under the Content folder in my project template and created two sub-folders named "css" and "img" under that. I added the .css files in css folder and .png files in img folder.

Note: The framework assumes that the .png images are located under a folder named "img" under the parent folder of the folder in which the .css files are located.

4. Adding the CSS

Open the _Layout.cshtml and add the following two lines in the head tag at the end of its existing content.

Note: The jQuery file is already added. But it is inside the head tag. I moved it down along with bootstrap JS. I used a later version of the
jQuery than the version that comes with Visual Studio template by default. You can download the latest version from
jQuery site.

6. Running the project

If you run your project in debug mode now, it will look really very odd. In fact, you will merely be able to see anything other than the Home and About tab. But nothing has gone wrong. We can fix that.

7. Modify the Site.css

a) Open the Site.css file and look for the "header h1, #header h1" style item. I replaced it with the following block.

If we reload the page now, we will be able to see the navigation bar to be changed in a twitter bootstrap style.

Note: If you don't like the line under the brand, you can open the Site.css and modify the a:link styling item by changing the value of text-decoration property to none.

10. Choosing between brand and site title

Our page now has two places where you can display our site title. One is the original place that comes with MVC template and the second is the brand area in the navigation bar. We can keep any one of these two depending on our taste.

11. Modify Home Page

Open Index.cshtml and replace the content with the following -

@{
ViewBag.Title = "Home Page";
ViewBag.Active = "Home";
}
<divclass="hero-unit"><h2>@ViewBag.Message</h2><p>This is a template to demonstrate the way to beautify the default MVC3
template using Twitter Bootstrap website. It is pretty simple and easy.</p><p><ahref="http://asp.net/mvc"class="btn btn-primary btn-large"style="color: White;">To learn more about ASP.NET MVC visit &raquo;</a></p></div>

12. Modify About Page

There are a lot of ways you can set the layout of your page when using Bootstrap. Open the
About.cshtml file and replace the content with the following and see a example: