Using the Twitter Bootstrap Theme for Drupal

Get the Power of the Bootstrap Framework in a Drupal Theme

Bootstrap is an inordinately popular framework, built by Twitter. With the Bootstrap Theme for Drupal, you can get (and maintain) all that power for your Drupal website. Get ready to add smooth buttons, styled forms, jumbotrons, and more, until your site sports some bling!

What is the Bootstrap Framework?

The Bootstrap framework is a collection of CSS and Javascript code that makes it easy for you to add a long list of pretty and/or useful things to your website.

This list includes nice-looking buttons, lists with "badges", inset "wells" and much more.

Beyond the bling, Bootstrap also packs serious responsive power, helping you design a site that won't utterly shatter when your boss opens it on a phone.

Instead of having to write all this code yourself, you use the CSS classes and HTML elements specified by Bootstrap. If you want a pretty label, you add the class label. Like this:

Look at this <span class="label">pretty label</span>.

The Bootstrap framework has no connection to Drupal. You can use it with any CMS that won't explode on contact with jQuery (see below), or even with a static HTML website.

What is the Bootstrap Theme for Drupal?

The Bootstrap Theme for Drupal makes it much easier to use Bootstrap on your website. Download this theme and set it as your default.

Actually, you'll probably want to use the Bootstrap theme as the base theme for your own subtheme.

Although, it's true that the Bootstrap theme offers such extensive administration screens that you may be able to customize it satisfactorily without a line of code.

Bootstrap relies on the jQuery Javascript library. You may also need to install the jQuery Update module to get the version it needs. If any other modules on your site use jQuery, be careful -- they may not work with too new a version of jQuery.

You'll have to read the documentation for this theme and make sure you don't need to take any further extra steps. But it's still pretty easy.

Do You Have to Use the Bootstrap Theme to Use Bootstrap in Drupal?

Because the Bootstrap framework is just CSS and Javascript, you don't need to use the Bootstrap theme. You can manually download the Bootstrap library and link to it on your theme templates.

However, the Bootstrap theme has already done this tedium for you. It's also integrated various Bootstrap features into Drupal admin screens. If you prefer clicking to coding, this theme can make your life a lot easier.

Choose Which Version of Bootstrap to Use

Before you download this theme, read the project page and make sure you understand which version you should download. Different versions correspond to different versions of the Bootstrap framework.

For instance, the 7.x-2.2 release for the Bootstrap theme was the last to support the 2.3.2 release for the Bootstrap framework. As of this writing, the stable version of the Bootstrap theme is 7.x-3.0, which works with Bootstrap 3.

Note how the Bootstrap theme developers have kindly coordinated their major version numbers with Bootstrap. The 7.x-2.x releases are for Bootstrap 2, and the 7.x-3.x releases are for Bootstrap 3.

Bootstrap 2 and Bootstrap 3 are mostly similar  but pay attention to the differences when you read the framework documentation. It's easy to read the documentation for the wrong version without realizing it.

Although you probably want to use the most recent stable version if you can, note that Bootstrap 3 requires jQuery 1.9+, while Bootstrap 2 only requires jQuery 1.7+. If using jQuery 1.9 will break a crucial module on your site, you might have to use Bootstrap 2 for now.

Before You Use Bootstrap

Bootstrap can save you lots of work and help your website sparkle. But before you strap yourself into Bootstrap, take a look at the ZURB Foundation theme.

ZURB Foundation is a similar framework which has important differences. Personally, I've only used ZURB Foundation so far, but my research indicates that while Bootstrap is better if you like the Bootstrap "defaults", ZURB Foundation is better if you plan to do serious customization on your theme. I've certainly found ZURB Foundation a delight to customize.

Even if you're sure you want to use Bootstrap, don't miss these tips on using a framework with Drupal.