Transform ASP.NET MVC3 Default Template with 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

You can download the Bootstrap from the following the github site. 

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.

<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" /> 

You don't need to remove any of its existing content.   

NOTE: We need to make sure the responsive CSS appears after the main CSS. 

5. Adding the JavaScript  

It is a good practice to add the JavaScript files at the end of the page content. I added the following two lines at the end of the _Layout.cshtml file before ending the body tag.

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></script> 

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.   

header h1, #header h1 {
    font-weight: normal;
    padding: 5px 0;
    margin: 0;
    color: #5c87b2;
    border: none;
    line-height: 2em;
    font-size: 20px !important;
    text-shadow: 1px 1px 1px #111;
}

If we reload the home page now, we'll be able to see "My MVC Application" written on the top.

b) Look for #logindisplay, #logindisplay a:link, #logindisplay a:visited and #logindisplay a:hover style items and change the color property to #555 instead of white. 

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: #555;
}
 
#logindisplay a:link {
    color: #555;
    text-decoration: underline;
}
 
#logindisplay a:visited {
    color: #555;
    text-decoration: underline;
}
 
#logindisplay a:hover {
    color: #555;
    text-decoration: none;
}

If we reload the page, we'll be able to see the Login link. 

8. Modify Body  

1. Open _Layout.cshtml.
2. Replace the class name of the top div tag under body tag from page to container-fluid. 
3. Cut <div id="menucontainer"> from with in <div id="header"> to just below where the <div id="header"> tag ends.  
4. Add class="row-fluid" attribute to #header, #menucontainer, #main and #footer divs.
5. Remove the #menucontainer and #main id attribute value from the respective divs.

Out _Layout.cshtml file should look like this now:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet"
        type="text/css" />
</head>
<body>
    <div class="container-fluid">
        <div id="header" class="row-fluid">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
        </div>
        <div id="" class="row-fluid">
            <ul id="menu">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </div>
        <div id="" class="row-fluid">
            @RenderBody()
        </div>
        <div id="footer" class="row-fluid">
        </div>
    </div>
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")" type="text/javascript"></script>
</body>
</html>
 

9. Modify the Navigation Menu 

Replace the <ul id="menu"> tag and its inner content with the following block:

<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            </a><a class="brand" href="http://www.mysite.org">My Demo App</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="@(ViewBag.Active == "Home" ? "active" : "")">
                        @Html.ActionLink("Home", "Index", "Home")
                    </li>
                    <li class="divider-vertical"></li>
                    <li class="@(ViewBag.Active == "About" ? "active" : "")">
                        @Html.ActionLink("About", "About", "Home")
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

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";
}
 
<div class="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><a href="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:

@{
    ViewBag.Title = "About Us";
    ViewBag.Active = "About";
}
 
<div class="row-fluid">
<div class="span4">
    <h2>About 1</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, 
       tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
       Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
    <h2>About 2</h2>
    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, 
      tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. 
      Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn" href="#">View details &raquo;</a></p>
</div>
<div class="span4">
    <h2>About 3</h2>
    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. 
       Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, 
       tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn" href="#">View details &raquo;</a></p>
</div>
</div>

That's it, we are done in these 12 steps and it requires hardly 30 mins but offers fairly nicer UI with a professional look to present to your client for a prototype.

Now the template should look like this:

You can also change the LogOn and Register pages in the same line as above.