Last updated 9 November 2015. Created on 23 April 2013.
Edited by markcarver, Ron Williams, jhodgdon, sun. Log in to edit this page.

The documentation for the Drupal Bootstrap base theme has moved to:

The documentation below is only for the 7.x-3.0 release and is considered outdated and possibly inaccurate.


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.


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


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 file to match the folder name, like: 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 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.

Copy over the bootstrap/less/variables.less to less/variables.less then fix paths as stated in less/README.txt.

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).


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.


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.


Bootstrap comes packaged with the default Glyphicons. This base-theme has support for utilizing these icons via the Icon API. When requiring additional icons, consider using alternative icon management services, like Fontello.

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