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
There are some Panels Bootstrap Layouts available:
You can also get some Display Suite Bootstrap Layouts:
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
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: