Using the Bootstrap Theme with Drupal
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.
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:
Do you know if these sites and bootstrap/Drupal create Accessible WCAG complaint websites ?
Hi Ryan, they can help, but it’s never quiet as easy as that. In addition to your theme, you need to choose modules and content wisely.
Thanks for the article! Personally, I really like Radix ([url=https://www.drupal.org/project/radix)]https://www.drupal.org/proj…[/url], which is based on the SASS version of Bootstrap. It also has a drush one-liner to install a Bootswatch (ex: drush radix “Subtheme” –bootswatch=cerulean)
Unfortunately, unable to produce the basic site post installation of Bootstrap module and activation of jquery update. Have spend couple of hours searching for solutions over the internet but no success. My layout looks completely different for some reason. Could you please have a look at the attached and recommend .. thanks in advance
I have installed Bootstrap 3.0 theme through [url=http://Drupal.org]Drupal.org[/url], The drop-down menu does not work. I don’t receive any message for Jquery Any idea for solving this?
First go to the menu settings you want to have drop down, then click the show as expanded. Also your version of bootstrap needs to support that drop down component check bootstrap css for collapsible.
I don’t see the bootstrap_subtheme folder. Here are the folder/files that come with the bootstrap theme:
bootstrap.api.php
[url=http://bootstrap.info]bootstrap.info[/url]
bootstrap.make.example
bower.json
css
docs
favicon.ico
grunt
Gruntfile.js
includes
js
LICENSE.txt
logo.png
package.json
[url=http://README.md]README.md[/url]
screenshot.png
starterkits
template.php
templates
theme-settings.php
Any ideas what I might be doing wrong?
Download this release.
[url=https://www.drupal.org/node/2137547]https://www.drupal.org/node…[/url]
Copy “bootstrap_subtheme”. Refresh.
My understanding is that Twitter Bootstrap framework and bootstrap theme (in drupal) are different. The latter does not build such an attractive website as the former does.
If I want to leverage drupal modules with twitter bootstrap framework, can it be done and if yes, how?
Thanks Very much for taking out time.
@Indian_Scarecrow Yes, but only because they need some adaption to match Drupal. The theme really does use the original Bootstrap files. Using a theme like this really is your best bet for using Bootstrap in Drupal.
thanks for this article! i use bootstrap theme . i want to have just two block on my home page. i want to disable the article (title and content) on home page. how can i do this?