Categories
Drupal Development Resources

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.

jQuery update settings for Drupal Bootstrap theme

 

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:
    bootstrap starter kit

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.

4 replies on “Tutorial: Drupal Bootstrap 3.4 Subtheme with LESS”

I see there is only less folder not css folder in bootstrap source code .. So I need to follow below steps:
1. cd sites/all/themes/mysubtheme/bootstrap
2. mkdir css
3. lessc less/bootstrap.less > css/bootstrap.css
4. in .info file : stylesheets[all][] = bootstrap/css/bootstrap.css
5. Clear cache
Without it we can't see bootstrap.css loading automatically. Do I need to do same for whole less folder ?

Please note, that you need to go to your subtheme's folder (not bootstrap) to compile less/style.less from there:

$ cd path-to-my_subtheme
$ lessc less/style.less > css/style.css

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.