How to Create a Drupal 8 Bootstrap Subtheme

Create a Drupal 8 Bootstrap subtheme using CDN

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/:

001

  • 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.

002

  • Now open the schema file inside config and update the label

003

  • Now go back to the “Appearance” tab in your Drupal site.
  • Scroll down to the uninstalled themes section and we should see “subtheme”.

004

Install and set as the default theme and you are ready to start customising your own theme.

Author

0 0 votes
Article Rating
Subscribe
Notify of
guest

14 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
ziobudda
ziobudda
7 years ago

Thanks

steve
steve
7 years ago
Reply to  ziobudda

Sure thing. Glad that helped, ziobudda

Mili Livia Sahni
Mili Livia Sahni
6 years ago

thanks so much!

lakenney
6 years ago

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.

Jeoul
Jeoul
6 years ago

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

Diego Restrepo
Diego Restrepo
6 years ago

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?

Diego Restrepo
Diego Restrepo
6 years ago
Reply to  Diego Restrepo

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:”

Raphaël Fiquet
Raphaël Fiquet
5 years ago

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?

mike421
mike421
5 years ago

did you clear the cache? Admin, Config, Performance

Soumya Rauth
Soumya Rauth
5 years ago

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.

Libor
Libor
5 years ago

Just a question how do you define new regions for Bootstrap 3 subtheme CDN. I mean more footers devided into colums etc…

APGreisch
5 years ago

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

Joe
Joe
4 years ago

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.

zouzou
zouzou
3 years ago

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

14
0
Would love your thoughts, please comment.x
()
x