Bootstrap is a true blessing for web developers which is a sleek, intuitive and powerful mobile first front-end framework for faster and easier web development. When you mix that with LESS pre-processor you get a mighty tool for creating a Drupal 8 theme.

In this tutorial we will be looking into initiating your own custom theme using Drupal’s Bootstrap base theme. The Drupal Bootstrap base theme bridges the gap between Drupal and Bootstrap framework. Drupal 8 being relatively new, has very little documentation available to use Bootstrap, which now has a stable release for Drupal 8.

To spare you some frustration and as a source of resource for our staff, I've arranged an orderly guide for making your own sub-theme.

  1. Download, extract and place the Bootstrap base theme in your “theme” folder. It doesn’t make any difference if the theme stays disabled as we will be using it just as a parent theme for our sub-theme. N.B. : Unlike Drupal 7, Bootstrap for Drupal 8 does not require jQuery Update module.
  2. Copy the entire less folder from “/themes/bootstrap/starterkits” and place it in “/themes” along with bootstrap directory.bling


  3. Rename the less folder as the name of your theme. Let’s say we call it “bling”less
  4. Rename the following files in your “bling” theme directory:
  • THEMENAME.libraries.yml to bling.libraries.yml (All the libraries associated with your theme will be entered in this file)
  • THEMENAME.starterkit.yml to (The info file for your theme)
  • THEMENAME.theme to bling.theme (SImilar to template.php in Drupal 7)
  • config/install/THEMENAME.settings.yml to config/install/bling.settings.yml (This file is only used to override existing settings.)
  • config/schema/THEMENAME.schema.yml to config/schema/bling.schema.yml (Schema for the theme setting configuration file of your theme.)

5. Update your

6. Download Bootstrap Source and upload it to “bling” folder. The source directory is named as bootstrap, which  contains the Source Less, JavaScript, and font files.

7. Next compile the less file which will create the style.css file. On compilation the style.css will be filled up all the Drupal specific overrides, Bootstrap CSS and also your custom css.
lessc less/style.less > css/style.css

8. Enable your theme from Drupal UI and you should see the base Bootstrap theme in action.



Brownie Points:

  • Add theme.js file:
    • Create a directory “js” in your theme
    • Add a file named theme.js which will hold the JavaScript applicable sitewide.
    • Add the library in the bling.libraries.yml as:
        js/theme.js: {}


Your libraries file should look like this after adding these two items:

Malabya Tewari

Malabya joined Valuebound as Drupal developer but eventually moved from just being a Drupal backend developer to a near full-stack developer. From devops to front-end and from project management to project delivery, he has tasted nearly all the fields in software development. Apart from coding he likes to laze around with his laptop digging into new technologies or watching YouTube.
More about Malabya Tewari

comments powered by Disqus