Getting Started with Twitter Bootstrap

September 23, 2012

IntroductionTwitter Bootstrap

Last week I wrote a post on how to get started with GitHub. It was part of a session I presented during a company trip early September. The second part of the session showed how you can quickly setup an ASP.NET MVC application and integrate Twitter Bootstrap into it.

For those not familiar with Bootstrap, it is a collection of CSS and HTML conventions for helping you out with typograpghy, forms, buttons, navigations…etc. Included as well is a collection of (optional) JavaScript extensions.

Table Of Contents

Download

Download the latest version of Twitter Bootstrap. Go ahead and click the big download button. It’ll download one archive called bootstrap.zip. You can also customize the Twitter Bootstrap download. Choose the components, jQuery plugins and default look and feel. But for now, the default package will do.

The archive contains a folder called “bootstrap”, which in turn contains 3 sub-folders.

Bootstrap Archive

  • The css folder contains 2 cascasding stylesheets:
    • bootstrap.css (+ bootstrap.min.css)
    • bootstrap-responsive.css (+ bootstrap-responsive.min.css)
  • The js folder contains 1 JavaScript library:
    • bootstrap.js (+ bootstrap.min.js)
  • The img folder contains 2 images:
    • glyphicons-halflings.png
    • glyphicons-halflings-white.png

As you can see both a debug and a minified version of the stylesheets and JavaScript library have been included. The glyphicons-halflings.png image contains about 140 icons. The glyphicons-halflings-white.png is just a white variant of the icons. Bootstrap uses the icons from GLYPHICONS. They are referenced in the stylesheets.

Remark: If you customize the download you’ll get the same files, but the bootstrap.css and bootstrap-responsive.css have been merged into one file (bootstrap.css). The contents of the bootstrap-responsive.css files have been appended to the bootstrap.css file.

Top of page

ASP.NET MVC Project

Integrating Twitter Bootstrap into an ASP.NET MVC site is a piece of cake. Let’s quickly iterate through the necessary steps. Start Visual Studio and create an new ASP.NET MVC 4 project (empty template), called TwitterBootstrap. Afterwards you should see the following files in your Solution Explorer.

ASP.NET MVC Project (Empty Template)

Extract the bootstrap.zip you downloaded earlier and copy the css, js and image folders into the root of the web application.

Bootstrap Resources

Back in the Solution Explorer click the “Show All Files” button and include the 3 new folders into your project.

Include In Project

You also need to download the latest jQuery version. Save it in the js folder and include it in your project.

jQuery

Top of page

Bootstrapping a Site

The ASP.NET MVC project now includes all the necessary Bootstrap resources. Let’s create a page which contains a Bootstrap component.

Add a basic master layout (Views\Shared\_master.cshtml) to the project. Add a new folder called Shared to the Views folder and add a new view named _master to it.

Master Layout

A basic page containing some boilerplate HTML will be generated for you. Make sure the DOCTYPE declaration is set to the HTML 5 DOCTYPE as Bootstrap uses certain HTML 5 tags.

<!DOCTYPE html>

Include bootstrap.css (or bootstrap.min.css) and jQuery in the HEAD element.

<head>
    <title>Twitter Bootstrap</title>
    <link href="@Url.Content("~/css/bootstrap.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/js/jquery-1.8.2.min.js")" type="text/javascript"></script>
</head>

Just before you close the BODY element include the bootstrap.js (or bootstrap.min.js) file.

<body>
...
<script src="@Url.Content("~/js/bootstrap.min.js")"></script>
</body>

Alright, we’ve got a basic master layout now. We need to add at least one page. Add a new controller, HomeController, to the Controllers folder. Make sure the controller has one actoin method called Index.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

Next add a new folder called Home to the Views folder and add a view named Index into this new folder. When creating the view select the _master.cshtml page as its master page.

Index View

OK, one remaining task. You’ve got to add the @RenderBody() method somewhere on the _master.cshtml page in order to render the Index view.

For example:

<body>
    <div>
    @RenderBody()    
    </div>
    ...
</body>

If you compile and run the project you should get the following output:

Index

Top of page

Navbar Component

Now we can finally start using Twitter Bootstrap. Let’s demonstrate it using Bootstrap’s Navbar component.

Just copy the following HTML directly below the BODY’s opening tag in the _master.cshtml file.

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" 
                    data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="brand" href="#">Euricom</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="#">GitHub</a></li>
                    <li><a href="#">Bootstrap</a></li>
                    <li><a href="#">MongoDB</a></li>
                    <li><a href="#">Knockout</a></li>
                    <li><a href="#">AppHarbor</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

It’s just a div containing a list of menu items. A couple of Bootstrap CSS classes are used here (navbar, navbar-inner, brand, nav, active). Bootstrap takes care of the rest and turns into a beautiful navigation bar. Go ahead and run it.

Navbar

Bootstrap contains a a chuckload components, JavaScript plugins…etc. which you can readily use. Just check out the Twitter Bootstrap site to discover them.

Top of page

Responsive Design

Just one last thing I want to address is the responsive design of Bootstrap. If you run the web application now and resize the browser to a small size you’ll get the following effect:

http://twitter.github.com/bootstrap/j

Readable, but not really a nice effect. Let’s remedy this. You only need to do one thing to achieve this. Include the bootstrap-responsive.css (or bootstrap-responsive.min.css) file just below the bootstrap.css link in the HEAD section.

<link href="@Url.Content("~/css/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />

Refresh the page.

Responsive Navbar

The menu items have been hidden (collapsed). Instead a button is shown. You can click this button to toggle the menu items.

Navbar button

Very easy if you quickly want to create a site which renders nicely on a desktop, tablet or smart phone.

If you take a look at the HTML code for the navbar you’ll notice that it contains a button which is initially hidden if the browser window is large enough, but is shown once the viewport is too small too display all the menu items.

Notice the HTML5 data- attribute (data-toggle) on the button. The menu items on the other hand are contained within a div that has the css class nav-collapse attributed to it. Using this information Bootstrap knows it should hide the menu items and show the button once the viewport is too small.

Remark: If you want to include your own CSS file, it’s best to insert it between the bootstrap.css and bootstrap-responsive.min.css file to prevent the responsive part of Bootstrap from messing up your custom style.

I hope you enjoyed this quick introduction to Twitter Bootstrap. Be sure to check it out in more detail. It’s very easy and contains a ton of useful components, plugins…etc.

Top of page

11 Responses to “Getting Started with Twitter Bootstrap”

  1. Targogle Says:

    Thanks soooo much for the article it was a big help! You gave clear instructions and good screen captures. Sadly, a lot of articles aren’t written with as much care.


  2. Super helpful. Thanks a bunch!

  3. inbrown Says:

    I’ve worked a bit with Twitter Bootstrap and PHP/YII framework. This helps translate the bootstrap to Visual Studio. I’m using VB.net, but the tutorial worked for me. Thanks for this article!!!

  4. tarim Says:

    The responsive design doesn’t work my customized nav bar. I don’t know how to fix it.

    Thanks,

  5. Marshall Says:

    Great writeup, thanks.


  6. just in case, you have the latest version of bootstrap, you will need to check the css references above and change to work with bootstrap 3.x


  7. should be noted, this blog is for bootstrap 2.x not 3.x

  8. the-jedi-master Says:

    The button doesn’t work for me :-(


  9. You may also want to checkout this link for advanced Bootstrap customization using Git branching strategy:
    http://tarkus.me/post/70489442659


  10. […] Getting Started with Twitter Bootstrap […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 341 other followers

%d bloggers like this: