- Install LESS Compiler
- Create the subtheme
- Download Bootstrap source
- Compile the LESS files
- Enable Your Subtheme
- Copy template files from the parent theme (Optional)
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:
Verify the Installation
We can quickly verify that NVM is now installed and working properly with the following command:
Which in this case would yield a result of:
Another very useful command to get you started on Node.js management is:
1.2: Install Node.js via NVM
Check Available Node.js Versions
Versions that are available for installation:
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:
Which gives the output:
In this case I am now running v6.9.1.
Gives the following output:
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
Now using node vx.x.x
1.3: Install Grunt
From the command line:
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
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:
2.3: Configure your .info file
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
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:
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:
The rest is optional, but it doesn’t hurt to have them in there.
4: Compile the LESS files
Navigate to the root
In Drupal 7 on Ubuntu 14.04 LTS this is going to be:
npm will look at the package.json file and automatically install the necessary local dependencies listed there.
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:
5: Enable jQuery 1.10
Download/Enable jQuery Update
Extract/upload to your
Set the “Default jQuery Version” to 1.10
Set “Alternate jQuery version” to 1.5 (This prevents issues with AJAX heavy modules like Views)