How To Create a Custom Drupal 8 Theme based on Bootstrap

| Drupal Development | 27 seen

Bootstrap Drupal 8

When building a new Drupal website I prefer working with a Bootstrap theme and apply a subtheme 

Just like in the case with Drupal 7, theming a subtheme based on Bootstrap is super simple - in a few words - download and enable a Drupal 8 bootstrap theme, then in the Drupal themes folder create a new theme folder and make a custom info.yml file

here is a live example from OptionsBrew.com theme

  • in the themes folder, create a new folder -> optionbrew
  • in the optionbrew folder create a new file - > optionsbrew.info.yml

in the optionsbrew.info.yml file paste following:

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

name: 'OptionsBrew'
description: 'A custom Drupal Bootstrap 3 based sub-theme for OptionsBrew.com.'
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'

Save the file and clear the cache for the Drupal website. Now when accessing admin - > appearance, you should see your custom Drupal 8 theme 

Custom Drupal 8 theme

Custom Drupal 8 theme

Now Install and set as default

here you go, we just created and enabled a custom Drupal theme based on Bootstrap 3, now it's up to you how you will theme it

When using Bootstrap subtheme I usually do very little rewriting, mostly with some custom css stylying

How To apply Custom css and js to Drupal theme

Here is a good read on apply css and js for Drupal 8: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme

Defining a library

Define all of your asset libraries in a *.libraries.yml file in your theme folder. If your theme is named optionsbrew, the file name should be optionsbrew.libraries.yml. Each "library" in the file is an entry detailing CSS and JS files (assets), like this:

global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
global-scripts:
  version: 1.x
  js: 
    js/navmenu.js: {}

To be available everywhere in the theme, the global-styling/global-scripts libraries must then be added to your theme's info.yml (in this case optionsbrew.info.yml)

libraries:
  - optionsbrew/global-styling

Hope it helps!

Disqus

Add new comment

About text formats