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 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
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
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
bootswatch.less file for a specific theme. Just click on the down arrow on a download button and download both files.
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
style.less and add the
bootswatch.less file using an import statement;
@import 'bootswatch.less';. Place it below
// Bootstrap library. @import 'bootstrap.less'; // ...
// 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
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
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.
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.
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.