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.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
- When using 7.x-2.0: Bootstrap 2.3.2 Source
- When using 7.x-3.0: Bootstrap 3.x.x Source
- The Bootstrap Library source files are in LESS. You must use either a local LESS preprocessor or install and enable the LESS module - 7.x-3.0-rc1 or higher (see setup).
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.
Bootstrap Library Methods
There are currently two types of supported methods for adding the Bootstrap Library 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 the Bootstrap Library.
The second method is rather simple and utilizes the CDN Bootstrap Library 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.
IF USING THE LESS MODULE
Change the stylesheets include of your sub-theme's .info file from
less/style.less. These will be generated once the theme is enabled and viewed. If this doesn't work, make sure you are using 7.x-3.0-rc1 or higher.
Warning: There is currently a bug with the lessphp compiler and bootstrap, see . Use at your own risk: do not create issues for this bug. There is nothing we can do about it on our projects.
IF USING A LOCAL PREPROCESSOR
./less/style.less file. A new file should be generated as
Now, you will need to uncomment the lines in your sub-theme's .info file (pertaining to this method).
Additionally you should exclude the bootstrap.js from base theme:
exclude[js] = 'sites/all/themes/bootstrap/js/bootstrap.js'
You should NOT exclude
sites/all/themes/bootstrap/js/bootstrap.js. This provides specific Drupal functionality, and is not part of the Bootstrap source/distribution--hence will not interfere with anything.
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.