Jeremy Morgan

Ramblings of a Polyglot coder
posts - 3 , comments - 28 , trackbacks - 0

How To Use Twitter Bootstrap on an ASP.Net Website

Author: Jeremy Morgan

If you don’t know what Twitter Bootstrap is, you should check it out. Basically the idea is taking a bunch of commonly used web elements that you would usually code and having them already set up for you. Things like buttons, forms, and other things you would normally code already set up.

I know what you’re thinking “Just like the toolbox?” yes but Twitter Bootstrap goes even farther, and can provide even more valuable tools for your site such as layouts and widgets. The idea is to get you to spend less time on trivial elements and more time actually building your site.

I decided to see how hard it would be to integrate something like Twitter Bootstrap into a basic ASP.Net site, with master pages. Let’s see how it works.

Create a New Project

So I open up Visual Studio and select Start –> New Project and select “ASP.NET Empty Web Application”

 asp-bootstrap-01_thumb2

I named mine “BootstrapASP” and click ok.

Your project looks, well, pretty empty, here is what you’ll have:

asp-bootstrap-02_thumb

Which is pretty plain. Let’s create a folder structure that looks like this:

asp-bootstrap-03a_thumb

Get Twitter Bootstrap

Head on over to the Twitter Bootstrap github and download the bootstrap archive into a folder on your hard drive.

It should look like this:

asp-bootstrap-03_thumb

Pretty self explanatory.

Import all these files into your project. If you don’t know how to do that, right click on the css folder and select add –> Existing Item. Then browse the folder where you unzipped the Twitter bootstrap and select all the files in the CSS folder. Do this with the img and js folders as well, and make sure to keep this structure intact.

Your structure should now look like this:

asp-bootstrap-04_thumb1


You’re almost ready. for this tutorial we’re going to use normalize.css you can download it here and import it into your project. This will keep the layout more consistent and is a good alternative to reset tags.

Create Your Master Page

For this site we are going to want to use a master page, so we can have a common header and footer throughout the site.

Right click on the BootstrapASP folder and select Add –> New Item

In the dialog that pops up select Master Page and name it “BootstrapASP.Master”

Open the BootstrapASP.Master file.

Here you will find the following code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="BootstrapASP.master.cs" Inherits="BootstrapASP.BootstrapASP" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
       
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

This is pretty much your standard html page, but we’re going to make a few additions to it.

On the line after the <title></title> tags add the following lines:


<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="css/normalize.css" />

 

Then at the bottom of the page, right before the </body> tag, add the following two lines:

<script type="text/javascript"  src='<% ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>

<script src="js/bootstrap.min.js"></script>

Then add a method to your master page code behind. (Open up BootstrapASP.Master.cs)

Add the following method:

protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
        Page.Header.DataBind();
    }

 

What is this “ResolveUrl” Method?

Often times when you use jQuery on an ASP site with Master Pages you get JS runtime error because the path of the page you are on may be different from the one that was present when jQuery was loaded. This solution by Waleed Mohamed solves the JavaScript inside Master Pages problem.

Set up the Master Page

Twitter Bootstrap contains some features to layout your page, we’ll do something very basic with it today. 

In the web form of your master page, insert the following code:

<div>
        <div class="container">
            <div class="row-fluid"><div class="span12"><h1>Welcome to our Website</h1></div></div>
            <div class="row-fluid">
              <div class="span2">
              sidebar
              </div>
              <div class="span10">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
              </div>
            </div>
        </div>
    </div>

This creates a 2 column layout with a header. Span=12 is the full width of the page, and that’s what we want our header to do. Span 2 is the sidebar, which is of course much smaller than span 10 which is our content.

We’ll do more with this page in a minute.

Create Your Index Page

Add –> New Item

In the next dialog Select “Web form using Master Page”

Name it Default.aspx

Select a Master Page –> BootstrapASP.master

Modify Index Page

Open up Default.aspx and you’ll see there isn’t much there. However there is a content holder with an of “ContentPlaceHolder1” and that’s where your dynamic text will go. Note: If you’re unsure about how Master Pages work that’s ok, it’s not complicated. You should read up on it so you can better understand what’s going on here though.

Lets throw in a hello world and press play (F5)

This is your basic page. Let’s throw in some random elements in there for fun.

Add Some Style to Master Page

Open up the Master Page again (BootstrapASP.Master.cs) and add the following inside the “span2” div

<ul>
       <li>Home</li>
       <li>Schedule an appointment</li>
       <li>Contact us</li>
       <li>About Us</li>
       <li>Follow us on Twitter</li>
</ul>

This will be the side menu that sits on the left.

Add –> New Item

In the next dialog Select “Style Sheet”

save as “ourstyle.css”

Now add

<link type="text/css" rel="stylesheet" href="/css/ourstyle.css" />

to your master page. We’re going to extend some of these styles.

Open up ourstyle.css and put in the following code:

#topheader
{
    background-color: #0094ff;
    color: white;
}
#sidebar
{
    background-color: #999999;
    min-height: 600px;
}
#footer
{
    background-color: #b200ff;
    text-align: center;
}

Save the file.

Now go back to your Master Page and make the following modifications:

change the top 12 span:

<div class="span12”>

to

<div class="span12" id="topheader">

and

<div class="span2">

to

<div class="span2" id="sidebar">

and ( lower 12 span)

<div class="span12">

to

<div class="span12" id="footer">

This puts IDs on the layout elements.

Finished Master Page Code (within the form)

<div>
        <div class="container">
            <div class="row-fluid"><div class="span12" id="topheader"><h1>Welcome to our Website</h1></div></div>
            <div class="row-fluid">
              <div class="span2" id="sidebar">
              <ul>
                  <li>Home</li>
                  <li>Schedule an appointment</li>
                  <li>Contact us</li>
                  <li>About Us</li>
                  <li>Follow us on Twitter</li>
              </ul>
              </div>
              <div class="span10">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
              </div>
            </div>
            <div class="row-fluid"><div class="span12" id="footer">&copy; 2012 Your Company</div></div>
        </div>
    </div>

 

This gets your Master Page styled up and ready. Though I admit it looks horrible it gives you a general idea of how Twitter bootstrap can help you with layouts.

Last Step: Open Your Index Page (Default.aspx) again

Open up your Default.aspx site again and add some code after the tag: <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<p>Welcome to the site, you must log in to enter</p>

   <div class="control-group">
   <label class="control-label" for="inputEmail">Email</label>
   <div class="controls">
     <input type="text" id="inputEmail" placeholder="Email">
   </div>
</div>
<div class="control-group">
   <label class="control-label" for="inputPassword">Password</label>
   <div class="controls">
     <input type="password" id="inputPassword" placeholder="Password">
   </div>
</div>
<div class="control-group">
   <div class="controls">
     <label class="checkbox">
       <input type="checkbox"> Remember me
     </label>
     <button type="submit" class="btn">Sign in</button>
   </div>
</div>

This is not a functional form, but I wanted to throw a few things on there so you can see what types of things are included in the Twitter Bootstrap kit.

Now press play (F5) and it should look something like this:

asp-bootstrap-06_thumb2

 

As you may know, master pages work as a templating system where the inner content changes, but the headers and menus stay the same. You can test this out by creating new pages using the master page you just created.

Select Add –> New Item –> Web Form From Master Page and select the Master Page you just created, and save the file as something else.

I hope this has helped those folks out there who want to utilize Twitter Bootstrap with their ASP pages.

Thanks for reading!

- Jeremy

About the Author

Jeremy Morgan is a software engineer with over a decade of experience as a polyglot coder, dabbling in both LAMP and .Net worlds equally. He enjoys creating tutorials for new programmers in the hopes it will encourage more people to join this exciting hobby. Check out his programming blog here or say hi on Google+ sometime.

Print | posted on Tuesday, September 18, 2012 7:27 AM | Filed Under [ Tutorials asp asp.net bootstrap design css style web design ]

Feedback

Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Excellent article! Thanks!

PS: I didn't found the normalize.css
11/8/2012 9:21 AM | Gabriel
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Hi,

Thanks for this article but I received an error:

Unhandled exception at line 6, column 27 in http://localhost:*****/js/bootstrap.min.js

0x800a138f - Microsoft JScript runtime error: Object expected

When I pressed F5 around the Hello World part.

Thanks.
1/7/2013 4:10 PM | rex
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

rex, I ran into this problem also. There were issues with the .js files for a lot of the twitter bootstrap .js files. You need to make sure your includes are in the proper order (check their example file). It seems as if some of the .js files hold dependencies that the other files need.
2/1/2013 11:06 AM | Tom
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Please, change the "#" for a "=" in the JQuery link. You got me pulling my hair for an hour until I noticed it (you moron...)
Also you could do it right and also use ResolveUrl with Bootstrap script.
3/12/2013 3:57 AM | Sergi
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

I did not find the link for normalize.css. please provide the same to download
3/24/2013 10:32 PM | Srini
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

please provide the same to download
3/24/2013 10:33 PM | Srini
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Hi Jeremy,
thanks for the tutorial, it was really useful!
I have a question: when I try to add a CheckBox or a RadioButton, the text is displayed under the box (check or radio) instead of at the right of it.
Is there a way to avoid this?
Thanks again!
4/8/2013 4:55 AM | Francesco Formenti
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

You can download normalize.css from the source here: http://necolas.github.io/normalize.css/
5/2/2013 6:07 AM | NAthan
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

hi All,
We are looking for a Sr. .Net Developer with Bootstrap in Austin TX. Please send your resumes to monica@identitysol.com
5/3/2013 9:14 AM | Monica
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

good jump start! thank you.
5/8/2013 9:07 AM | Vijay
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

hi there thank you very much for the tutorial but I have a little problem where you find BootstrapASP.Master.cs
if it's code behind maybe is BootstrapASP.Master.vb instead of BootstrapASP.Master.cs

am just curious because i cant add that lines of code anywhere sorry if i cant understand am just a rookie on this
5/19/2013 9:31 PM | Charlie
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Hi all,

Thanks for this tutorial.
In my project, in use meta queries in my css.
So, don't forget to add <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the master.
Else, the metas queries are not detected.
6/18/2013 7:41 AM | GAetan
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

here u just show us to include some js & css file related twitter. does it enough to design a website based on twitter library or do i need to do anything extra ?
7/3/2013 4:50 AM | Tridip
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

@Charlie you are using c# here not vb...so BootstrapASP.Master.cs page will be created for code behind file..
7/4/2013 10:53 PM | Panchal Dhaval
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

change from

<script type="text/javascript" src='<%# ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>

to

<script type="text/javascript" src='<%= ResolveUrl ("~/Js/jquery-1.2.3.min.js") %>'></script>
8/26/2013 2:10 AM | Change
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Great Tutorial !
9/20/2013 3:13 AM | Pierre
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Hi,
I am adding couple of responsive pages to my website using Bootstrap 3. My client's requirement is that only these 2 pages should be responsive while other pages should behave non-responsive.
While doing this i find that there are common user controls used in the website like topnavigation, main menu bar etc.
In order to include the bootstrap classes, extra divs and few additional html tags for mobile menu and at the same time remove these in non-responsive pages, what is the better way to add and remove html content to the existing controls including bootstrap classes based on responsive and non-responsive page checks?
10/8/2013 8:56 AM | kumbair
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Hi i want to ask how to get button click in server side ? or when i change the input boxes with asp textboxes validation doesnt work
12/12/2013 11:00 PM | okan
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

You may also want to check this link for advanced Bootstrap customization using Git branching strategy:
http://tarkus.me/post/70489442659
12/19/2013 10:16 PM | Konstantin
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

please can i use code behinde for this tutorial in ASP.NET C#?
1/2/2014 1:32 PM | mic
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Great post, don't forget to visit my web :)<br>spesifikasi dan harga laptop
1/13/2014 8:26 PM | rachmadp24
Gravatar

# How To Use Twitter Bootstrap on an ASP.Net List View

How i use twitter Bootstrap on Asp.net ListView control?Any body know Please mail me @ shahid_ab@ovi.com
1/27/2014 6:47 AM | Shahid
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Menu control

Hello All,
How can i achieve responsiveness to asp.net menu control using bootstrap twitter;
3/2/2014 11:30 PM | Saranya
Gravatar

# How To achieve responsiveness on an ASP.Net Website with Bootstrap

Hello All,
Can anybody send the code to achieve the responsiveness to asp.net menu control with bootstrap. Please, mailto: saransha21@gmail.com
3/2/2014 11:35 PM | saranya
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

this is a nice tutorial but in trying this to run in VS 2010
what happen to my site.css file?
3/17/2014 10:32 PM | AC_J
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

The design does not appear in when i run it in iis7 does anyone knew it..thanks in advance
3/17/2014 11:18 PM | AC_J
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

Hi very nice article. Helpful for people like me who are tryign to teach ourselves the technology. Thanks.
4/11/2014 11:07 PM | SR
Gravatar

# re: How To Use Twitter Bootstrap on an ASP.Net Website

I'm using Bootstrap template in asp.net project.so in that project asp.net events are not fire for the reason of bootstrap.

plz tell me the solution
4/15/2014 4:11 AM | Atul
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 
 

Powered by: