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.
- Bootstrap - 7.x-2.0 or 7.x-3.0 (base-theme must be enabled).
- jQuery Update - 7.x-2.4 or higher. Bootstrap 2 requires a minimum jQuery version of 1.7 or higher, while Bootstrap 3 requires jQuery 1.9+ (see ).
Conditional Requirements for Method 1: Bootstrap Source Files
- When using 7.x-2.0: Bootstrap 2.3.2 Source
- When using 7.x-3.0: Bootstrap 3.x.x Source
- The Bootstrap source files are written with LESS language. You must use a local LESS compiler.
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":
- LESS - This module is a good tool for compiling LESS source server side, however the leafo/lessphp PHP compiler is old and outdated, it causes many issues when attempting to compile newer versions of Bootstrap. Please follow (where this issue may be resolved).
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
Copy the starter kit sub-theme into
sites/all/themes or a
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.
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.
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.
Copy over the bootstrap/less/variables.less to less/variables.less then fix paths as stated in less/README.txt.
./less/style.less file. A new file should be generated as
Now, you will need to uncomment the lines under 'METHOD 1: Bootstrap Source' in your sub-theme's .info file (pertaining to this method).
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.
admin/appearance and click "Enable and set default" for your sub-theme.
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.
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.