Using a Bootstrap LESS Subtheme with Drupal 7

Written by Mark Chambers on September 9, 2016


  1. Install LESS Compiler
  2. Create the subtheme
  3. Download Bootstrap source
  4. Compile the LESS files
  5. Enable Your Subtheme
  6. Copy template files from the parent theme (Optional)
  7. Closing

1: Install LESS Compiler

These instructions are for Ubuntu 12.04 LTS. It may need to be slightly adjusted for other versions of Linux.

1.1: Install NVM (Node Version Manager)

Install a C++ Compiler

As a matter of best practice we’ll update our packages:

sudo apt-get update

The build-essential package should already be installed, however, we’re going still going to include it in our command for installation:

sudo apt-get install build-essential libssl-dev

Install NVM (Node Version Manager)

Use the following curl command to kick-off the install script:

curl -o- | bash

At the time of publication, NVM v0.32.1 was the most recent version available. You should check the GitHub project page for the latest release of NVM, and adjust the above command to include the newest (or another specific) version.

After running the above command, you may receive output similar to the following:

Close and reopen your terminal to start using nvm

Either do as the output suggests, and close and reopen your terminal session, or run the following command:

source ~/.profile

Verify the Installation

We can quickly verify that NVM is now installed and working properly with the following command:

nvm --version

Which in this case would yield a result of:


Another very useful command to get you started on Node.js management is:

nvm help

1.2: Install Node.js via NVM

Check Available Node.js Versions

Versions that are available for installation:

nvm ls-remote

To download, compile, and install the latest LTS release:

nvm install --lts

Note: If you want the latest stable release, then it’s simply nvm install latest.

If you see the message nvm_ensure_default_set: a version is required then run this:

nvm alias default 6.9.1

Now to display currently activated version run:

nvm current

Which gives the output:


In this case I am now running v6.9.1.

nvm ls

Gives the following output:

->       v6.9.1
default -> 6.9.1 (-> v6.9.1)
node -> stable (-> v6.9.1) (default)
stable -> 6.9 (-> v6.9.1) (default)
iojs -> N/A (default)
lts/* -> lts/boron (-> v6.9.1)
lts/argon -> v4.6.2 (-> N/A)
lts/boron -> v6.9.1

And finally, if you want to modify PATH to use another installed version, use the following command:

nvm use x.x.x

Which returns:

Now using node vx.x.x

1.3: Install Grunt

From the command line:

Install grunt-cli globally with:

npm install -g grunt-cli

When completed, you'll be able to run the various Grunt commands provided from the command line that we will need in Step 4.

2: Create Bootstrap Subtheme

2.1: Get latest Bootstrap Theme

Download the Drupal Bootstrap theme

Extract/upload to


There is no need to activate the theme. We only need this to set up the subtheme.

    2.2: Create the subtheme directory and copy files

    Create a new folder for your subtheme inside


    In our example, we’ll call our subtheme


    So we should have an empty directory at


    Copy all the files from




    Your subtheme directory should look like this:
    Subtheme contents

    2.3: Configure your .info file




    Remember to replace “my_subtheme” with the name of your own subtheme.

    Edit with your text/code editor of choice and give it a unique name and description:

    name = My LESS Bootstrap subtheme
    description = A Bootstrap subtheme for my project
    core = 7.x
    base theme = bootstrap

    Uncomment scripts files

    Since we’re going to compile from source and NOT use the default Bootstrap CDN, uncomment all the  “Scripts” section by removing the semicolons ; in front of each of the javascript files:

    scripts[] = 'bootstrap/js/affix.js'
    scripts[] = 'bootstrap/js/alert.js'
    scripts[] = 'bootstrap/js/button.js'
    scripts[] = 'bootstrap/js/carousel.js'
    scripts[] = 'bootstrap/js/collapse.js'
    scripts[] = 'bootstrap/js/dropdown.js'
    scripts[] = 'bootstrap/js/modal.js'
    scripts[] = 'bootstrap/js/tooltip.js'
    scripts[] = 'bootstrap/js/popover.js'
    scripts[] = 'bootstrap/js/scrollspy.js'
    scripts[] = 'bootstrap/js/tab.js'
    scripts[] = 'bootstrap/js/transition.js'

    Disable Bootstrap CDN

    Remove the semicolon in front of:

    settings[bootstrap_cdn] = ''

    3: Download Bootstrap source

    Download Bootstrap source, extract the files and rename the base directory to


    Upload the whole directory to your subtheme folder. It should look like this when you’re done:

    ├─ bootstrap/
      ├─ dist/
        ├─ css/
        ├─ fonts/
        └─ js/
      ├─ docs/
      ├─ fonts/
      ├─ js/
      ├─ less/
      └─ (etc.)
    ├─ css/
    ├─ less/
    ├─ templates/
    ├─ template.php
    └─ (etc.)

    The only folders you need from source are:


    The rest is optional, but it doesn’t hurt to have them in there.

    4: Compile the LESS files

    Navigate to the root /bootstrap directory.

    In Drupal 7 on Ubuntu 14.04 LTS this is going to be:

    cd /var/www/html/sites/all/themes/bootstrap

    Then run:

    npm install

    npm will look at the package.json file and automatically install the necessary local dependencies listed there.

    Just compile CSS and JavaScript

    grunt dist

    Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files. As a Bootstrap user, this is normally the command you want.

    Other Grunt commands

    Here is a list of other available Grunt commands.


    Should you encounter problems with installing dependencies or running Grunt commands, first delete the 


    directory generated by npm. Then, rerun:

    npm install

    5: Enable jQuery 1.10

    Download/Enable jQuery Update

    Extract/upload to your sites/all/modules

    Set the “Default jQuery Version” to 1.10

    Set “Alternate jQuery version” to 1.5 (This prevents issues with AJAX heavy modules like Views)