How to Create a Drupal 8 Bootstrap Subtheme
Bootstrap is an incredibly popular option for creating Drupal themes.
Using the Bootstrap CDN allows you to quickly and flexibly add custom code that overrides the Bootstrap defaults. This is a great way to make your own Drupal theme based on Bootstrap.
In this tutorial, we will demonstrate how to create a Drupal 8 subtheme that uses the Bootstrap CDN.
- Firstly, you will need to download, install and enable the Bootstrap theme.
- Now open the Bootstrap folder, enter the starterkits folder and copy the CDN folder.
- Place the /cdn/ folder in the main /themes/ folder next to /bootstrap/:
- Now rename the /cdn/ folder with the name you want to give your theme. For this tutorial, I will simply call it /subtheme/.
- Now we need to replace THEMENAME with subtheme in the following files:
- /config/install/THEMENAME.settings.yml
- /config/schema/THEMENAME.schema.yml
- /THEMENAME.libraries.yml
- /THEMENAME.theme
- The starterkit file is slightly different and needs to be renamed from /THEMENAME.starterkit.yml to /subtheme.info.yml
- Now open subtheme/subtheme.info.yml in your editor of choice. I recommend Atom.
- Again update the ‘THEMETITLE’ and description with the details of your theme.
- Now open the schema file inside config and update the label
- Now go back to the “Appearance” tab in your Drupal site.
- Scroll down to the uninstalled themes section and we should see “subtheme”.
Install and set as the default theme and you are ready to start customising your own theme.
Thanks
Sure thing. Glad that helped, ziobudda
thanks so much!
I’m looking for next step. How to use and edit Bootstrap Twig Templates to style Views. In particular, I’m trying to style Webform submissions. Any tutorial recommendations? Thank you in advance.
Thank you for this. I would also like to know the next step, how would one go about editing the default template/block types. Many thanks
When I implement a subtheme I see that suddenly “drupalSettings” is empty or not present in Javascript, and this return when I set by default another theme (Bartik), this issue is breaking other modules (geolocation_field, slick_views, etc), could you give me information to solve this problem?
I solved it! in the file THEMENAME.libraries.yml (in my case cc.libraries.yml) I added a key/value (header: true) just before “css:”
Hi, I went through all of those steps, but when I start editing style.css, nothing change, as if the subtheme wasn’t overriding bootstrap theme. any hint for me?
did you clear the cache? Admin, Config, Performance
Thanks a lot. A question: What is the best way to add a custom SCSS script with this theme. I can only see the style.css but not any scss stylesheet.
Just a question how do you define new regions for Bootstrap 3 subtheme CDN. I mean more footers devided into colums etc…
The new bootstrap update eleminated the CDN files and replaced it with a THEMENAME folder in the ‘starterkit’ folder.
https://drupal-bootstrap.org/api/bootstrap/docs!Sub-Theming.md/group/sub_theming/8.x-3.x
Any pointers on how to best tweak some of the attributes of the sub-theme? Without tweaks it is not really useful as you could just use the base theme. I am struggling to find good references.
bonjour j ai installer bootstrap 4 (ver 4.2.0.1)sous drupal 9 mais je ne trouve pas le dossier starterkits est je besoins de créer un subtheme comment le faire s.v.p
Translation:
hello i have installed bootstrap 4 (ver 4.2.0.1) under drupal 9 but i can’t find the starterkits folder is i need to create a subtheme how to do it s.v.p