Overview

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- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | 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:

0.32.1

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:

v6.9.1

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

sites/all/themes

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

sites/all/themes

In our example, we’ll call our subtheme

my_subtheme

So we should have an empty directory at

sites/all/themes/my_subtheme

Copy all the files from

sites/all/themes/bootstrap/starterkits/less

to

sites/all/themes/my_subtheme

Your subtheme directory should look like this:

2.3: Configure your .info file

Rename

less.starterkit

to

my_subtheme.info

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

Edit my_subtheme.info 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

bootstrap

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

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

The only folders you need from source are:

less
js
fonts

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.

Troubleshooting

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

/node_modules/

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)