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 (http://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.
    Bootstrap-ASP.NET-2
  3. Go to Solution Explorer –> right-click the project and select Manage NuGet Packages.
    Bootstrap-ASP.NET-3
  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.
    Bootstrap-ASP.NET-4
  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.
    Bootstrap-ASP.NET-5
  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.
    Bootstrap-ASP.NET-6
  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.
    Bootstrap-ASP.NET-13
  11. The new master page with the added code looks like this:
    Bootstrap-ASP.NET-7
  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:
    Bootstrap-ASP.NET-10
  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:
    Bootstrap-ASP.NET-11
  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.
    Bootstrap-ASP.NET-12

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.

14 comments for “Twitter Bootstrap with ASP.NET

  1. Dipak Borse
    October 8, 2014 at 1:47 am

    Hi Sir

    The Tutorial is very nice explaining a lots of things for me I have one query how to use controls their facing problems when I use Devexpress controls here in Asp.Net website please explain me.

  2. Pawan Kumar
    June 11, 2014 at 3:31 pm

    Hi there, this is a nice article explaining ASP.Net with bootstrap.

    thanks

  3. Ian
    June 1, 2014 at 6:49 am

    Hi, this is a nice article and I followed it to the letter, BUT the span3 and span9 classes are not in my css files at all the the separation of the navigation div from the content doesn’t happen. So why are the span classes not in my bootstrap installation from NuGet?

  4. Madog
    March 16, 2014 at 1:43 am

    Would have been a wonderful article were it updated to the latest versions of the Bootstrap css. It seems a lot of the classes are used in the article are missing from the latest Bootstrap CSS. BVut thanks anyway, it gave me a taste of what Bootstrap was all about

  5. Bob
    March 12, 2014 at 4:51 pm

    Hi,

    How to modify or customize master page using bootstrap and site.css. For example we
    can create or modify a mast page by creating a table and add a image in left column, a title in middle column at first row … But it is difficult doing same thing at Framework 4.5
    Do you have any suggestion or answer?
    Thanks,
    Bob

    • April 3, 2014 at 2:20 pm

      Hello Bob,
      Bootstrap layout can be divided with up to 12 columns. With bootstrap version 2 you can create columns using the span class in div tag . In bootstrap version 3 you can use col-xx-# like col-md-4 to create columns. Hope this is what you are expecting.

  6. February 4, 2014 at 2:44 am

    Hi, Thanks for this great article. I have successfully installed bootstrap using Nugget.
    But the problem is I think the bootstrap.js is being imported because for navbar-collapse when it collapses the, and I click the hidden items are not being revealed. pls help.

    Thanks, Benjamin

  7. Alejandro Ferguson
    November 21, 2013 at 8:44 pm

    Soo amazing! i knew there’s a way to use bootstrap with C# thanks a lot my dear! (Y)

  8. Bill
    August 27, 2013 at 8:20 am

    Hi, thanks for your article, I wonder if you can help? I do the NuGet install but this does not add the relevant folders or files.

    Any possible suggestions? I appreciate this is a bit like ‘My computer doesnt work!’ but do you know of any common issues/problems in this area?

    Thanks,

    Bill.

    • August 27, 2013 at 9:55 am

      Bill,
      I’m not sure what version of visual studio you are using or the version of bootstrap you are trying to install from nugget. My suggestion will be to uninstall the bootstrap nuget package and try installing it again.

Leave your thoughts...