Get Bootstrap base theme

• Download Bootstrap base theme.
• Extract it and put it in your website's theme folder(e.g. ./themes)

Copy startkit folder

In ./themes/bootstrap/starterkits, there are 3 folders: cdn, less, sass. Each represent different ways you can customize your theme.

• less has built-in support for LESS processor
• sass has built-in support for SASS preprocessor
• cdn doesn't use any preprocessor.

Pick the framework that you like and copy it over to your theme folder. I recommend to copy cdn as it is easier for beginners. And, there is no compiling to do.

Make the copied folder your theme

• Rename ./themes/cdn to ./themes/mytheme
• In mytheme folder, rename the following files:
  • THEMENAME.libraries.yml to mytheme.libraries.yml
  • THEMENAME.starterkit.yml to mytheme.info.yml. Note: starterkit is changed to info.
  • THEMENAME.theme to mytheme.theme
  • config/install/THEMENAME.settings.yml to config/install/mytheme.settings.yml
  • config/schema/THEMENAME.schema.yml to config/schema/mytheme.schema.yml

Update your theme informations

Open mytheme.info.yml and change THEMETITLE and THEMENAME. Here is an example.

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

name: 'My Theme'
description: 'Uses the jsDelivr CDN for all CSS and JavaScript.'
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:
  - 'mytheme/global-styling'

Install your theme

Go to Appeareance and install your theme. Note: If you encounter any errors when activating your theme, remember to clear your cache at Configuration->Performance.

Conclusion

Congratulation! You have made your own theme using Bootstrap base theme. Now have fun to further customize your theme with the settings.

Recommend read

• Use SVG file for your logo