How To Create a Custom Drupal 8 Theme based on Bootstrap

| Drupal Development | 58 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!

 

Latest articles

LEGOLAND Berlin Review: A Fun Family Activity in the German Capital

When planning a family trip to Berlin with children, most travelers immediately think about the Berlin Zoo — and rightly so. But if you are spending a few days in the German capital with younger kids, another solid half-day activity is the LEGOLAND Discovery Centre BerlinWe visited it in April 2026 together with our 7-year-old daughter during our…

Germany |

Ādģēri: The 30K Mistake That Turned Into a Long-Term Experiment

In 2023, we bought Ādģēri in an online auction.Price: just over €30,000.Financing: ~6% interest.Total expected payment over ~5 years: ~€40,000.Status (April 2026): more than half already paid.On paper, it was a bad deal.Realistically, we overpaid by at least 5–6× relative to what the property was objectively worth at the time. No serious buyer…

Ādģēri |