The standard look and feel of Bootstrap is unmistakable and often you can spot a website using it a mile away. The dead giveaways are the buttons and navigation, but it doesn’t have to be this way.
If you want to change the look and feel of your Bootstrap site then take a look at Bootswatch. It offers 12 great looking themes, and best of all they are free and open source.
In this tutorial, we’ll learn how to use a Bootswatch theme in two ways. The first method will show you how to use the BootstrapCDN and in the second we compile the LESS files ourselves.
Getting Start
Before we begin, head over to drupal.org and download the Bootstrap theme and jQuery Update.
If you use Drush, run the following command:
drush dl bootstrap jquery_update
Once everything has been downloaded, go and enable jQuery Update and then go to Configuration, “jQuery update”. Change the version of jQuery to 1.7 and click on “Save configuration”. We need jQuery 1.7+ for the theme to work.
Method 1: Use BootstrapCDN
The quickest way to use a Bootswatch theme is to use the BootstrapCDN. The CDN hosts Bootstrap as well as Bootswatch. Instead of having to download and store a copy of Bootstrap locally, you can use the CDN to host the CSS.
The theme for Drupal offers a configuration option where you can select which Bootswatch style you want to use. This is great for testing out different styles, but it’s not flexible if you want to modify the theme.
To use the CDN, create a sub-theme, and then go to Appearance and click on the Settings link for your theme.
In the “Bootstrap Settings” area, click on Advanced and then “BootstrapCDN”.
Select a version of Bootstrap and a Bootswatch theme. Then click on “Save configuration”.
If you go to your homepage, you should see a new look and feel.
Method 2: Compile Custom Bootstrap CSS
The second method I want to demonstrate is compiling the LESS files yourself, and creating a customised version of bootstrap.css.
If you want to customise Bootstrap properly, then this is the way to go. From within variables.less you can modify a lot of stuff like colours, borders and even the grid.
Of course, this method requires more work but it’s worth it.
1. Install LESS
The first important step is to install lessc to compile LESS locally. It can be compiled in a few ways, but I’ve found that using the npm version to be the most stable. I’ve heard of users having trouble compiling LESS using lessphp for example.
Go ahead and run npm install -g less to install it.
2. Create a Drupal Bootstrap Sub-Theme
Go into the Bootstrap theme that you downloaded earlier and make a copy of the bootstrap_subtheme folder and place it in sites/all/themes.
Rename the folder and call the theme whatever you like and make sure you rename the info file the same.
Once complete you should have a new bootstrap sub-theme.
Check out the Bootstrap sub-theming documentation page on drupal.org for more details about sub-theming.
3. Download Bootstrap
Download a copy of Bootstrap 3.1.0 and place the extracted folder in your sub-theme. Make sure that the folder name is bootstrap, rename it if you have to.
4. Select a Bootswatch theme
Head over to bootswatch.com and download the variables.less and bootswatch.less file for a specific theme. Just click on the down arrow on a download button and download both files.
Replace the variables.less that is already in the less directory in your sub-theme with the one you’ve downloaded. Then, place the bootswatch.less into the same directory.
5. Edit style.less
Open up style.less and add the bootswatch.less file using an import statement; @import 'bootswatch.less';. Place it below bootstrap.less.
From this:
// Bootstrap library. @import 'bootstrap.less'; // ...
To this:
// Bootstrap library. @import 'bootstrap.less'; @import 'bootswatch.less';
6. Edit variables.less
We need to make a single change to the variables.less for it to work with our sub-theme. Open it up and search for the @icon-font-path variable. Change the value from ../fonts/ to ../bootstrap/fonts/.
7. Compile LESS
The job of the style.less is to import all other files. The compiled version of less/style.less should be saved into css/style.css.
Open up your command line or terminal and cd into your sub-theme.
Once there, run the following command:
lessc less/style.less css/style.css
This command simply tells LESS to compile less/style.less and save the compiled version into css/style.css. Once compiled, open style.css, and you should see thousands of lines of CSS code.
8. Configure subtheme.info
Open the info file in your sub-theme and make sure stylesheets[all][] = css/style.css is there and NOT commented out. Also, disable the BootstrapCDN by uncommenting settings[bootstrap_cdn] = ''.
Once you’ve made your changes, save the file and don’t forget to flush the site cache.
9. Test theme
Now click on Appearance in the administration toolbar and enable your sub-theme. Then head over to the homepage and you should see your new bootswatch theme.
Summary
As mentioned earlier, if you’re going to make drastic changes to the theme then compile your own version of Bootstrap. I understand that you can override CSS properties, but you have much more flexibility when you modify the LESS files directly.
FAQs
Q: I can’t select Bootstrap 3.1.0 from the CDN drop-down.
If you want to use the latest version of Bootstrap. Download and store it in your sub-theme.
Q: I made changes to my sub-theme info file and nothing has changed.
Flush the site cache whenever you change something in the info file.
Q: None of the jQuery plugins are working when I use method 2.
You have to manually select which plugins you want to use by uncommenting them from the Scripts section in the info file.
I use Radix (http://drupal.org/project/radix) for my Bootswatch themes. With Drush, it’s just a one liner:
drush radix “My Theme” –bootswatch=BOOTSWATCH_NAME
eg. drush radix “Awesome Theme” –bootswatch=flatly will create a Flatly theme in one go.
Demo: http://dev-radix.gotpantheon.com
Thanks for the tip. I didn’t know about this theme.
I have grown to love Radix because it uses SASS. It would be great to see this tutorial using the sass bootstrap gem as I have ever understood how it works 🙂
Interesting, I didn’t know that there’s a SASS version of Bootswatch. Send me the link.
Installing bootstrap 3 and bootswatch theme caused tb_mega menus not to show up and the site name is not clickable anymore.
You’re bound to have some compatibility issues. It’s part of the site building process.
Great article! I’ve used Radix (which Open Atrium uses as a base theme), Kalatheme, and the Bootstrap theme. They all have their strengths. Much of the information here applies no matter what base theme you are using. I especially appreciate the primer on .less since I’ve only ever used SASS/Compass for CSS.
Cheers,
Jeff
Kalatheme comes with a setup wizard within the theme settings that allows you to generate a subtheme from the interface with any Bootstrap library; there’s a dropdown with all the Bootswatch themes available out-of-the-box for quick plug-and-play. Checkout instructions here: https://drupal.org/node/2167149
Thanks for the tip.
Not really sure where I went off the rails. Installed node and lessc (I think), but when I run:
lessc less/style.less css/style.css
in the sub theme directory, the outputted css/style.css file just contains the following text:
/**
* This file should get overwritten if Method 1 is used. If Method 2 is chosen,
* remove this comment and start adding your styles to this file.
*/
It is otherwise empty.
Not sure what the problem is. Double check and make sure lessc has been installed properly.
The process, in terminal language 🙂
cd /var/www/example.dev/sites/all/themes/
cp bootstrap/bootstrap_subtheme/ new_subtheme -R
cd new_subtheme/
mv bootstrap_subtheme.info.starterkit new_subtheme.info
wget https://github.com/twbs/bootstrap/archive/v3.3.4.zip
unzip v3.3.4.zip
rm v3.3.4.zip
mv bootstrap-3.3.4/ bootstrap
cd less/
rm variables.less
wget http://bootswatch.com/journal/variables.less # or “cosmo” or “cyborg”…
wget http://bootswatch.com/journal/bootswatch.less
vi style.less
# add
@import ‘bootswatch.less’;
cd ..
vi new_subtheme.info
# add this, before default css/style.css:
stylesheets[all][] = css/less-style.css
# mark out:
settings[bootstrap_cdn] = ”
lessc less/style.less css/less-style.css
sudo -i
chown siteowner:www-data /var/www/example.dev/sites/all/themes/ -R
Thanks.
Also had to do this, to get rid of a lot of “page not found”: /sites/all/themes/THEME_NAME/fonts/glyphicons-halflings-regular.woff2
cp /sites/all/themes/THEME_NAME/bootstrap/fonts/ /sites/all/themes/THEME_NAME/fonts/ -R
Thanks for the tip.
Thanks for the comment.
Thanks for this tutorial! I was able to get ‘Method 2’ to work for Sass instead of Less, but I had to make a few adjustments before it worked:
– Step 1: Obviously, you should install SASS instead of LESS.
– Step 2: Follow as described, but use the SASS starterkit from the Bootstrap Theme to create a Sub-Theme
– Step 3: Follow as described, but use the official SASS port of Bootstrap: https://github.com/twbs/bootstrap-sass
– Step 4: Follow as described, but download the SASS files instead of the LESS files, and (re)place them here: /bootstrap/assets/stylesheets/bootstrap/
– Step 5: Edit /scss/style.scss to this:
// Bootstrap Framework.
@import ‘../bootstrap/assets/stylesheets/bootstrap’;
@import ‘../bootstrap/assets/stylesheets/bootstrap/bootswatch’;
– Step 6: Skip this step
– Step 7: Compile SASS.
– Step 8 and 9 are the same.
Cheers!
Cool, thanks.
I have created a page at drupal.org, describing how to quickly create a Bootstrap subtheme for Drupal 8: https://www.drupal.org/node/2781903
Awesome, thanks.