Are you a .Net Developer?

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”

I named mine “BootstrapASP” and click ok.

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

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

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:

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”

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.

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.

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

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:

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.

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.

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!

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.

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?

Some apps are a great fit for SaaS, but most aren't -- and you'll have to work hard to succeed. Heroku is a platform as a service (PaaS) that enables developers to build and run applications entirely in the cloud. Goatripsindia

Superb i really enjoyed very much with this article here. Really its a amazing article i had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.informative post School web design uk