WDTUTORIALS
menu
Django - The Easy Way Django - The Easy Way
Samuli Natri 2015.12.16
Samuli Natri has been a software developer since the 90's. He enjoys building web applications and games. He attended Helsinki University Of Technology (Computer Science) and Helsinki University (Social Sciences).

Drupal 8 - How To Install Bootstrap Subtheme

Tutorial on how to install Bootstrap subtheme using a content delivery network.

Installation

drush -y en bootstrap

Now you should see the theme in /themes:

Copy the CDN folder from the themes/bootstrap/starterkits folder..

..and paste it in the /themes folder:

Change the cdn folder name to mytheme and all THEMENAME occurrences to mytheme:

From Description
mytheme/config/install/THEMENAME.settings.yml mytheme/config/install/mytheme.settings.yml
mytheme/config/schema/THEMENAME.schema.yml mytheme/config/schema/mytheme.schema.yml
mytheme/THEMENAME.starterkit.yml mytheme/mytheme.info.yml
mytheme/THEMENAME.libraries.yml mytheme/mytheme.libraries.yml
mytheme/THEMENAME.theme mytheme/mytheme.theme

Note that THEMENAME.starterkit.yml changes to mytheme.info.yml.

Open mytheme/mytheme.info.yml

Change description to your liking.

Change all THEMENAME occurences to mytheme and theme name to My Theme:

core: 8.x
type: theme
base theme: bootstrap

name: 'My Theme' # < here
description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.'
package: 'Bootstrap'

...

libraries:
  - 'mytheme/global-styling' # < here

Open mytheme/config/schema/mytheme.schema.yml

Change all THEMENAME occurences and label:

mytheme.settings: # < here
  type: theme_settings # < here
  label: 'Mytheme settings' # < here

Go to admin/appearance and FIRST enable the bootstrap basetheme.

After that enable the custom theme:

And there you have it:

Bootswatch

Go to admin/appearance/settings/mytheme to change the theme settings. For example, in the Advanced section you can select Bootswatch themes:

The Paper theme looks like this:

Cerulean theme:

CSS Styles

Disable page caching.

Check How To Disable Page Caching tutorial on how to do it.

Override the default styling in themes/mytheme/css/style.css:

h1 { color: red;}

Now you should see red main headings: