Create responsive Drupal 8 theme using Bootstrap base theme in less than 10 minutes

By xngo on February 23, 2019

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

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.