Bootstrap for Drupal: how to create a subtheme in Drupal 8

Here goes another Drupal 8 post by one of our Drupal developers! Having enjoyed in-depth overviews of building Drupal 8 modules, theming, configuration, creating pop-ups, using Twig, and working with the Commerce 2.x module, we are now going to discover how to create a Bootstrap subtheme in Drupal 8.

Bootstrap is the most popular set of free tools for creating the right look and building interactivity on web pages.

The https://www.drupal.org/project/bootstrap site features a stable release of the framework for Drupal 7 and 8.

We will now consider the process of adding Bootstrap to your Drupal 8 website.

Step 1: Download Bootstrap

The download process:

• with Drush 

 $ drush dl bootstrap

• OR if you do not have Drush installed, download the archive from the https://www.drupal.org/project/bootstrap site, and extract it using this path YOUR_SITE_NAME/themes/ (boots/themes/ in this example).

WARNING!!! Do not enable your downloaded theme in Drupal UI!

Step 2: create your Bootstrap subtheme

Once you have extracted the previously downloaded archive with Bootstrap in the specified directory, it looks like this:

Open File Manager, find the directory with your website and open the starterkits/ (YOUR_SITE_NAME/themes/contrib/bootstrap/starterkits/) folder.

You will see three folders:

Each one is a little different:

● less — has built-in support for Less preprocessor (compiler, as well as a folder with the style.less file)

● sass — accordingly has the support for SASS

● cdn — has no files for any of these preprocessors

The next step is for you to copy one of these folders to the YOUR_SITE_NAME/themes/custom/ directory.

For example, I will copy the cdn/ folder:

Step 3: customize your subtheme (rename)

1. Rename the cdn/ folder as YOUR_THEME_NAME (eg. boots_theme)

Important!!! The name of the folder with your theme should have exactly the same format as in the example, because it is your theme’s machine name.

2. Open the folder with the theme and rename the following files:

● THEMENAME.libraries.yml to boots_theme.libraries.yml (all libraries are listed in this file)

● THEMENAME.starterkit.yml to boots_theme.info.yml

● THEMENAME.theme to boots_theme.theme

● config/install/THEMENAME.settings.yml to config/install/boots_theme.settings.yml (is used to override the current settings)

● config/schema/THEMENAME.schema.yml to config/schema/boots_theme.schema.yml (the scheme for the configuration file for the theme’s settings)

3. Change the data in boots_theme.info.yml

 core: 8.x
type: theme
base theme: bootstrap
name: 'Boots' // May differ from the machine name (you will see this name when you enable the theme in Drupal UI).
description: 'Uses the Bootstrap framework LESS source files and must be compiled (not for beginners).'
package: 'Bootstrap'
regions: navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries: - 'boots_theme/global-styling' - 'boots_theme/bootstrap-scripts'

Step 4: install your theme in Drupal UI (Drupal’s administrative interface)

Visit the /admin/appearance/ page and install your subtheme (install and set to default).

Enjoy =)

If you do your manipulations with the properly installed sub-theme and do not see any changes, there may be an issue hiding in the cache.

Notice: To clean the cache in Drupal 8:

 $ drush cache-rebuild 

Also, problem may be in the enabled style aggregation (you can disable it in Drupal UI using the admin/config/development/performance path)

In the future, to avoid confusion, I recommend creating 2 directories inside the themes/ folder (custom/ and contrib/) before downloading the framework:

Notice: the commands are carried out in the root folder of the site. The site with the given example is called "boots":

 $ mkdir themes/contrib/
$ mkdir themes/custom/

a. In the contrib/ directory, we load the contributed theme (drupal.org)

b. In the custom/ directory where our subthemes are located

Conclusion

By following these steps, you can customize and install your Bootstrap subtheme for Drupal 8 in just a few minutes).