Tutorial: Drupal Bootstrap 3.4 Subtheme with LESS

Bootstrap continues to be our favorite starter theme for Drupal 7. This is an update to our original guide on how to set up a Bootstrap subtheme with LESS. Many of the steps are the same but they’re repeated here for convenience.

Bootstrap 7.x-3.4 introduces some new features and a restructuring of its subtheme starterkit folder.

This guide covers setting up a subtheme with LESS only.

Overview

1. Get Bootstrap Theme
2. Create the subtheme directory and copy files
3. Configure your .info file
4. Download Bootstrap source
5. Compile the LESS files
6. Enable Your Subtheme
7. Copy template files from the parent theme (Optional)
8. Closing

1. Get Bootstrap Theme

1. Download the Drupal Bootstrap theme
   1. Extract/upload to your sites/all/themes
   2. There is no need to activate the theme. We only need this to set up the subtheme
2. Download/Enable jQuery Update
   1. Extract/upload to your sites/all/modules
   2. Set the “Default jQuery Version” to at least 1.9
   3. Set “Alternate jQuery version” to 1.5 or “Default (provide by Drupal)” –  This prevents issues with AJAX heavy modules like Views
   4. Set jQuery CDN to your own preference or based on the performance of your server. Loading the files from CDN takes some load and bandwidth off your server, but in some cases in may be faster served by your local server.

 

2. Create the subtheme directory and copy files

1. Create a new folder for your subtheme inside of sites/all/themes.
   1. In our example, we’ll call our subtheme my_subtheme, so we should have an empty directory at sites/all/themes/my_subtheme.
2. Copy all the files from sites/all/themes/bootstrap/starterkits/less to sites/all/themes/my_subtheme
3. Your subtheme directory should look like this:
   

3. Configure your .info file

1. Rename less.starterkit to my_subtheme.info. Remember to replace “my_subtheme” with the name of your own subtheme.
2. Edit my_subtheme.info with your text/code editor of choice and give it a unique name and description:

   name = My Awesome Bootstrap subtheme
   description = A Bootstrap Sub-theme customized for this particular project
   core = 7.x
   base theme = bootstrap

4. Download Bootstrap source

Download Bootstrap source and upload it to your subtheme folder. The folder names may start getting confusing here because the word “bootstrap” is part of the theme name as well as the source code. Be sure to put the files inside of your subtheme folder. It should look like this when you’re done:

my_subtheme/bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

The only folders you need from source are less, js, and fonts. The rest is optional, but it doesn’t hurt to have them in there.

5. Compile the LESS files

Compile the LESS files to create your style.css, which contains all of the Bootstrap CSS , Drupal-specific overrides (overrides.less), and your own custom code.

lessc less/style.less > css/style.css

6. Enable Your Subtheme

Enable your subtheme from Drupal. If everything went well, you should see the default Bootstrap styles loaded.

7. Copy template files from the parent theme (Optional)

If you plan on making only CSS changes to your theme, you can skip this step.

However, for more customized themes, you’ll want to modify the page.tpl.php and html.tpl.php files.

Copy page.tpl.php and html.tpl.php from sites/all/themes/bootstrap/templates/system to your subtheme’s templates folder at sites/all/themes/my_subtheme/templates

Flush the theme cache so Drupal will recognize the new files.

8. Closing

As you can see, setting up a Drupal Bootstrap subtheme can be a pain in the ass. If you develop websites for a living and work on many projects, you should look into creating your own git repository with all the necessary files and configurations. We maintain a repository for a generic “Bootstrap Subtheme” that can be enabled and used as is, saving about 20-30 minutes per new set up.