| Drupal
drupal bs3

Bootstrap is winning the web.

Nearly 10% of all websites now use the Bootstrap framework.

That's reflected on Drupal.org, where Bootstrap is the third most popular theme. Bootstrap is a base theme that integrates Bootstrap 3 with Drupal.

Here's a guide to getting started with the Bootstrap theme.

Getting Started with the Bootstrap theme

First things, first, go and download, install and enable the Bootstrap theme.

Using the Bootstrap Theme with Drupal

After enabling the theme you may see a message like this:

jQuery Update is not enabled, Bootstrap requires a minimum jQuery version of 1.7 or higher.
Please enable jQuery Update module 7.x-2.3 or higher, you must manually set this in the configuration after it is installed.

If you see that message, you will need to install the jQuery Update module too.

Once you have the correct version of jQuery, your theme will look like this:

By default, the Bootstrap theme start with a 12-column grid and three unequal columns. The two sidebars each use 3 columns and the main content column uses 6 columns. The Bootstrap framework itself has really good documentation, including this page on grids.

Bootstrap Module Layouts

As with many Drupal base themes, you will need extra modules to provide Bootstrap compatible layouts.

The Bootstrap theme documentation has an overview of the modules available.

For example, if you install the Views Bootstrap module, you will see these options inside Views:

There are some Panels Bootstrap Layouts available:

You can also get some Display Suite Bootstrap Layouts:

Bootstrap Sub-theming

The Bootstrap theme comes with a ready-to-use subtheme folder called "bootstrap_subtheme",

All you need to do is the rename one file. Take ".starterkit" from the end of the file name to leave bootstrap_subtheme.info.

Once that is set up, there are ways to continue working on your subtheme.

The easiest method (which Bootstrap) calls Method 1, is simply to open /bootstrap_subtheme/css/style.css. You'll see this comment below. You can delete that comment and start adding your own CSS.

The alternate, and far more involved approach, called Method 2, is described here.

If you've done the following step correctly, the Bootstrap sub-theme will appear in your admin area.

Alternative Sub-theme Options

There are't any fully-designed sub-themes available on Drupal.org, but you do have options.

Webwash has a good tutorial on using Bootswatch themes in Drupal. I suspect the same technique could apply to using commercial themes from WrapBoostrap.

Example Sites Using Bootstrap and Drupal

I can't 100% confirm whether these sites are using the Bootstrap theme itself, but they are using Drupal and Bootstrap together.

There's NASA, which needs little introduction:

Millfield School is a famous independent school in the U.K.:

The Eureka Network is an intergovernmental organization for market-driven industrial R&D:


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.