Introduction

Recently, I worked on a web application that would be used by teenagers and one of the requirements is for the user interface to beautiful. Prior to that time, I had fallen in love with the new twitter UI, the way the textboxes and buttons are usually styled. Thus, I thought it would be cool if the intended application’s interface elements or controls have twitter like look too. The result of my googling is twitter bootstrap framework.

Setting up your project to use twitter bootstrap

You can make your web application user interface very beautiful and aesthetically pleasing to the eyes with twitter bootstrap framework. It is lightweight and easy to use both in asp.net webform and mvc applications and it gives a web application a consistent look on pc, phones and tablets. Setting up a web project in visual studio to use twitter bootstrap is quite easy, after downloading the framework from twitter.github.com/bootstrap, extract it into a folder, copy the folder structure as it is into your existing web project  the folders have the names js, css and img respectively, do not alter the folder names, otherwise some components of the framework might not work properly.

With that setup, you can create an asp.net web form page that will contain two textboxes. To use the framewok to style controls in a page, you need to add reference to the css files in the asp.net web page.

During development

    <link href="css/bootstrap.css" rel="stylesheet">
   <link href="css/bootstrap-responsive.css" rel="stylesheet">
        

And during production, the minified version of the file would be referenced

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

Adding reference to the css files would expose a lot of css style attributes that can be used to style a lot of web elements or controls, even a gridview can be styled to give it a nice look. To demonstrate this you can add two server textboxes control to the webpage with their CssClass attribute set to "input-medium" and a button with CssClass attribute set to "btn btn-primary" run the application you should see a web page with the controls beautifully styled.