Twitter Bootstrap with ASP.NET

In my earlier article, I wrote about few of the User Interface Frameworks for Web Developers. One among them is Twitter Bootstrap. In this article I will write about bootstrap with asp.net websites and intranet applications.

This article is based on the steps I’ve followed to create my first ASP.NET Web Farms c# application with Bootstrap User Interface.

Tools and Technologies used:

• Visual Studio Express 2012 for Web.
• Twitter Bootstrap 2.3.2 from NuGet https://www.nuget.org/packages/Twitter.Bootstrap/2.3.2.

Steps for installing and using Bootstrap with ASP.NET Web Forms:

1. Launch Visual Studio.
2. Create a new ASP.NET Web Forms project.
   
3. Go to Solution Explorer –> right-click the project and select Manage NuGet Packages.
   
4. In the Manage Nuget Packages screen, select Online from the left panel, Then NuGet official Package source underneath and search for Bootstrap.
5. From the search result list in the center panel, select Twitter.Bootstrap.
6. Click the Install button to install Twitter.Bootstrap.
   
7. After the installation process completes check the content folder and the script folder in the solution. The bootstrap CSS and script files will be available.
   
8. In the solution explorer, right-click the project, select Add, select New Item… and create new Master Page. Rename the master page if you want.
   
9. Edit the new master page and add the below lines of code inside the title block to link the bootstrap CSS files.

    							<link href="content/bootstrap.css" rel="stylesheet" type="text/css" />
    							<link href="content/bootstrap-responsive.min.css.css" rel="stylesheet" type="text/css" />

10. At the end of the master page write the below line of code to call the bootstrap java script.
    
11. The new master page with the added code looks like this:
    
12. Now remove the div section and place the below code. This code is to create a container with 12 columns. You have to specify the container column size as span12. Then split the main container into two one with 3 columns (span3) for the left navigation section. The remaining column span (span9) for the contents.

    <div>
    <div class="container">
    <div class="row-fluid">
    <div class="span12">
    <div class="page-header"></pre></pre></pre></pre></pre></pre>
    <h1>Hello.. My tec Bits</h1>
    <pre>
    <pre>
    <pre>
    <pre>
    <pre>
    <pre>
    </div>
    </div>
    </div>
    <div class="row-fluid">
    <div class="span3">
    <ul class="nav nav-list">
     <li class="nav-header">Navigation</li>
     <li class="active"><a href="#">ASP.Net</a></li>
     <li><a href="#">Java</a></li>
     <li><a href="#">VB.Net</a></li>
     <li><a href="#">c#</a></li>
    </ul>
    </div>
    <div class="span9"></div>
    </div>
    </div>
    </div>
    

13. Now the Master Page looks more or less like this:
    
14. Delete the Default.aspx page if you already have one in the project.
15. Create another Default.aspx page by right clicking the project, select Add, select New Item… and select Web Form Using Master Page.
16. In the Master Page Selection screen select the new master page you have created earlier (in steps 8 to 13).
17. Edit the Default.aspx page and write something inside the ContentPlaceHolder1 content section. A sample below:
    
18. Now you are ready to build the solution.
19. Build the ASP.NET Web Forms solution either by hitting the F5 key or by clicking the green build arrow at the Visual Studio tool bar. On successful build, the web page will be launched in the browser similar to the one shown below.
    

See the article Twitter Bootstrap with ASP.NET MVC 4 for step by step details on creating a MVC 4 website using Bootstrap as the user interface.