Last updated April 11, 2014. Created by Mark Carver on April 23, 2013.
Edited by rogical, hatuhay, duntuk, konstantin.komelin. Log in to edit this page.

Below are instructions on how to create a Bootstrap sub-theme. There are many different variations on how to accomplish this, but this will focus on primarily the two most common: using local LESS pre-processing of the source Bootstrap framework and using the built-in CDN.

Requirements

  • Bootstrap - 7.x-2.0 or 7.x-3.0 (base-theme must be enabled).
  • jQuery Update - 7.x-2.3 or higher. Bootstrap requires a minimum jQuery version of 1.7 or higher. You must manually set this in the configuration after it is installed.

Conditional Requirements for Method 1: Bootstrap Source Files

Unsupported Modules

The following modules are not supported nor recommended for use as they conflict with these documentation methods. If they are installed, use at your own risk. Issues created regarding these modules will be closed as "won't fix":

The following instructions are based on Bootstrap-7.x-3.0 or higher but remain the same for Bootstrap-7.x-2.0. Just download Twitter Bootstrap 2.3.2

Setup

Copy the starter kit sub-theme into sites/all/themes or a
respective sites/*/themes folder. You should never modify a theme or a sub-theme bundled directly as all changes would be lost if the base theme were to be updated. Once copied, rename the folder to something of your choosing: my_bootstrap_theme. Then make sure you rename the bootstrap_subtheme.info.starterkit file to match the folder name, like: my_bootstrap_theme.info. Be sure to change the name and description properties inside the file as well.

IMPORTANT NOTE
Ensure that the .starterkit suffix is not added to your sub-theme's .info filename. This suffix is simply a stop-gap measure to ensure that the bundled
starter kit sub-theme cannot be enabled or used directly. This helps people unfamiliar with Drupal avoid modifying the starter kit sub-theme directly and forces the new sub-theme to be properly configured.

Bootstrap Methods

There are currently two types of supported methods for adding Bootstrap into your sub-theme. By default, the Bootstrap base theme enables a CDN to provide the necessary files. If this method suits you then you can skip this step.

The first method is probably the most dynamic and will grant you the ability to change the variables and utilize the mixins provided by Bootstrap.

The second method is rather simple and utilizes CDN Bootstrap via the base theme. It is very static and will require you to override existing styling in your sub-theme.

Regardless of which method you choose, you will need to un-comment the appropriate lines for your desired method in your sub-theme's .info file.

Method 1: Bootstrap Source Files

Download and extract the Latest Bootstrap source into your new sub-theme. After it has been extracted, the folder should read bootstrap. If for whatever reason you have an additional bootstrap folder wrapping the the bootstrap folder (like: bootstrap/bootstrap), remove the wrapping bootstrap folder. You will not need to touch these files again. This allows the framework to be updated in the future.

Compile the ./less/style.less file. A new file should be generated as ./css/style.css.

Now, you will need to uncomment the lines under 'METHOD 1: Bootstrap Source' in your sub-theme's .info file (pertaining to this method).

Done.

Method 2: Bootstrap CDN

This method is rather simple. You don't have to do anything unless you wish to override the default Bootstrap base theme settings. If so, just un-comment the
lines pertaining to Method 2.

Edit the provided ./css/style.css file to your liking.

Enable

Navigate to admin/appearance and click "Enable and set default" for your sub-theme.

File Structure

The following paths are relative to your sub-theme's base folder. These folders have an additional README.txt file. Please read them for a more detailed
explanation of their contents.

./css - Compiled sub-theme source files.
./less - Sub-theme source files.
./templates - Template files.

Icons

Bootstrap comes packaged with the default Glyphicons. This base-theme has support for utilizing these icons via the Icon API. However, given the limited capability of static sprite images, it is recommended that you consider using an alternative solution, like Fontello instead.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

Bootstrap Library - This module is not necessary and complicates development workflow. Do not use. You can create sub-sub-themes of a sub-theme to inherit stylistic designs if necessary.

Can someone clarify why/how this complicates the development workflow? Saying "Do not use." should be backed up with some concrete examples or specific issues that would be encountered. Providing frameworks/third-party code via the Libraries API is generally a best practice so I'd like to know why I should not use it in this case.

I totally agree with this one. Now there is no way to add modified and compiled to my own liking Bootstrap library, and have no option to add this to theme.

drupal+me are capable of: jewelers portfolio