Bootstrap sub-theming in Drupal 7

We all know that nowadays responsive design is a must for every website that we build. If you want to use Drupal for a website you wish to implement, there is an easy and simple way to do that. I’ll assume that you already have a basic installation of Drupal 7 on your local machine and also have some basic knowledge about this CMS.

What you need

Firstly, we need some prerequisites before we start. Here’s what you need:

• Drupal 7, latest version
• Bootstrap 3 for Drupal, latest version; also, we will tweak this later in order to work with the latest version of Bootsrap
• jQuery Update module, latest version
• LESS Compiler;
• Bootstrap 3.

We now have to move the downloaded theme and module in our corresponding directories.

• Bootstrap 3 Theme goes into var/www/html/*site_name*/sites/all/themes
• jQuery Update goes into var/www/html/*site_name*/sites/all/modules

Theme activation

Activate your theme by navigating to “Appearance” from your admin menu and click “Enable and set as default”. Refresh your page, resize it and see the Bootstrap theme doing its job.

So far, so good! But, what if we need to customize this theme? Altering the core code is not really a good idea; for example, if a new update for the theme is released, and we’ve modified some template pages, styles or scripts, all this work will be lost. Don't worry, because there is something called sub-theming.

Sub-theming the downloaded theme

A sub-theme inherits its base theme. In a few words, our custom theme inherits the installed Bootstrap theme. This allows us to modify all the things we need, and not lose the changes on the next update.

In your Bootstrap theme there is a folder called “bootstrap_subtheme”. Copy it in your theme directory and rename it. I've called mine “custom_bootstrap”. Navigate to your new sub-theme and rename the file “bootstrap_subtheme.info.starterkit” to “subtheme_name.info” (in my case it’s custom_bootstrap.info). Open the file and modify the name and description to whatever you may want.

Download and extract the Bootstrap source code in your sub_theme directory (current version is 3.3.2). Also, rename your extracted folder to simply “bootstrap”, not “bootstrap 3.3.2”. This is mandatory because in the next step we’ll compile the less style file and this searches for a bootstrap folder in your sub-theme. Now, in your sub-theme folder, go to less/ and there you’ll find a style.less file. To compile it, I run the following command:

 $ lessc style.less > var/www/html/*site_name*/sites/all/themes/*subtheme*/css/style.css

This will override the existing *subtheme*/css/style.css file.

If you don’t have the less compiler installed here is the command:

 $ sudo apt-get install node-less

Notice! If you encounter an error saying “NameError: variable @link-hover-decoration is undefined in /*subtheme_name*/bootstrap/less/scaffolding.less” don’t panic. It is an error thrown by the *subtheme_name*/less/variables.less because it does not contain the variables within the latest version of Bootstrap.

Just go to https://github.com/twbs/bootstrap/blob/master/less/variables.less, copy the source code and replace it in your *subtheme_name*/less/variables.less file. Recompile.

Enable Bootstrap for our sub-theme

Almost there! Now we just have to make our sub-theme use the Bootstrap source code that we’ve downloaded. Open your “subtheme_name.info” file and uncomment the script lines under Method 1.

; ;----------------------------------
; ; METHOD 1: Bootstrap Source Files
; ;----------------------------------
;
; ;;;;;;;;;;;;;;;;;;;;;
; ;; Scripts
; ;;;;;;;;;;;;;;;;;;;;;
;
 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'

Activate our new sub-theme

Once again, go to “Appearance” in your admin menu, and click “Enable and set as default” on your custom sub-theme. To be sure that everything has worked, open the style.css file and add at the end “body {background: lightblue; }”. Refresh the page and if you don’t see any change clear the cache.

There you go! You now have a fully customizable and responsive sub-theme that uses the latest version of Bootstrap.