How to Drupal- Installing Bootstrap subtheme

Sub-themes are just like any other theme, with one difference: They inherit the parent theme’s resources. There are no limits on the chaining capabilities connecting sub-themes for their parents. A sub-theme can be a child of another sub-theme, and it can be branched and organized however you see fit. This is what gives sub-themes great potential.

To create a Bootstrap subtheme is very easy. Bootstrap already created a subtheme entity on the bootstrap folder. Below are instructions on how to create a Drupal Bootstrap based sub-theme. There are several different variations on how to accomplish this task, but this topic will focus on primarily and most common way. To create a bootstrap subtheme, you’ve to install and enable the bootstrap base theme. Check our guide Installing Bootstrap theme.

This tutorial includes 2 main steps.

1. Make a subtheme from base theme.
2.Enable subtheme.

 

1. Make a subtheme from base theme.

Choose an Existing Starterkit from “C:\\Xampp\htdocs\drupal\themes\bootstrap\starterkits”

CDN Starter kit – uses the “out-of-the-box” CSS and JavaScript files served by the jsDelivr CDN.
Less Starter kit – uses the Bootstrap Framework source files and a local Less preprocessor.
Sass Starter kit – uses the Bootstrap Framework source files and a local Sass preprocessor.

Select folder CDN, copy it to “C:\\Xampp\htdocs\drupal\themes”.

Bootstrap Subtheme

 

 

Rename the CDN folder to any desired name. For this example and future examples, we’ll use “bootstrap_subtheme”.

Bootstrap Subtheme

 

Go to your subtheme folder and rename THEMENAME.starterkit.yml to bootstrap_subtheme.info.yml.
THEMENAME.libraries.yml to bootstrap_subtheme.libraries.yml.
THEMENAME.theme to bootstrap_subtheme.theme.

Bootstrap Subtheme

 

Open bootstrap_subtheme.info.yml.

Bootstrap Subtheme

 

Change the name, description, and any other properties to suite your needs.

Bootstrap Subtheme

 

“C:\\Xampp\htdocs\drupal\themes\bootstrap_subtheme\config\schema”

Bootstrap Subtheme

 

Rename THEMENAME.schema.yml to bootstrap_subtheme.schema.yml.

Bootstrap Subtheme
In your Drupal site, navigate to admin/appearance and click the Enable and set default link next to your newly created sub-theme.

Bootstrap Subtheme

 

Ensure your site’s jQuery version has been configured to meet the Bootstrap Framework minimum version requirement. The preferred method for updating Drupal’s jQuery is to install the jQuery Update module.

 

Anwar Yakkiparamban

Anwar Yakkiparamban is the founder of Lauyou Learning. Prior to Lauyou learning, Anwar worked at ARD Engineering & Development, Qatar. He holds bachelor degree in Electronics and Communication Engineering from Govt. Engineering College Idukki.

You may also like...