HTML5 Zone is brought to you in partnership with:

I started out writing Windows applications using Delphi and websites using PHP back in 2001. In 2007 I made the switch to the .NET framework and haven't looked back since. Currently I am working as a .NET developer for Euricom in Belgium. Christophe is a DZone MVB and is not an employee of DZone and has posted 23 posts at DZone. You can read more from them at their website. View Full User Profile

Getting Started with Twitter Bootstrap

09.25.2012
| 19972 views |
  • submit to reddit

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 typography, 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>

All right, 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

Okay, 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.

 

Published at DZone with permission of Christophe Geers, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)