Categories

(110)
(56)
(94)
(16)

Bootstrap for Drupal: how to create a subtheme in Drupal 8

08.11.2016
Bootstrap for Drupal: how to create a subtheme in Drupal 8
Author:

Here goes another Drupal 8 post by one of our Drupal developers! Having enjoyed in-depth overviews of building Drupal 8 modules, theming, configuration, creating pop-ups, using Twig, and working with the Commerce 2.x module, we are now going to discover how to create a Bootstrap subtheme in Drupal 8.

Bootstrap is the most popular set of free tools for creating the right look and building interactivity on web pages.

The https://www.drupal.org/project/bootstrap site features a stable release of the framework for Drupal 7 and 8.

We will now consider the process of adding Bootstrap to your Drupal 8 website.

Step 1: Download Bootstrap

The download process:

  • with Drush 
 $ drush dl bootstrap
  • OR if you do not have Drush installed, download the archive from the https://www.drupal.org/project/bootstrap site, and extract it using this path YOUR_SITE_NAME/themes/ (boots/themes/ in this example).

    WARNING!!! Do not enable your downloaded theme in Drupal UI!

    Step 2: create your Bootstrap subtheme

    Once you have extracted the previously downloaded archive with Bootstrap in the specified directory, it looks like this:

    Bootstrap for Drupal: how to create a subtheme in Drupal 8

    Open File Manager, find the directory with your website and open the starterkits/ (YOUR_SITE_NAME/themes/contrib/bootstrap/starterkits/) folder.

    You will see three folders:

    Bootstrap for Drupal: how to create a subtheme in Drupal 8

    Each one is a little different:

    less — has built-in support for Less preprocessor (compiler, as well as a folder with the style.less file)

    sass — accordingly has the support for SASS

    cdn — has no files for any of these preprocessors

    The next step is for you to copy one of these folders to the YOUR_SITE_NAME/themes/custom/ directory.

    For example, I will copy the cdn/ folder:

    Bootstrap for Drupal: how to create a subtheme in Drupal 8

    Step 3: customize your subtheme (rename)

    1. Rename the cdn/ folder as YOUR_THEME_NAME (eg. boots_theme)

    Important!!! The name of the folder with your theme should have exactly the same format as in the example, because it is your theme’s machine name.

    2. Open the folder with the theme and rename the following files:

    THEMENAME.libraries.yml to boots_theme.libraries.yml (all libraries are listed in this file)

    THEMENAME.starterkit.yml to boots_theme.info.yml

    THEMENAME.theme to boots_theme.theme

    config/install/THEMENAME.settings.yml to config/install/boots_theme.settings.yml (is used to override the current settings)

    config/schema/THEMENAME.schema.yml to config/schema/boots_theme.schema.yml (the scheme for the configuration file for the theme’s settings)

    3. Change the data in boots_theme.info.yml

     core: 8.x
    type: theme
    base theme: bootstrap
    name: 'Boots' // May differ from the machine name (you will see this name when you enable the theme in Drupal UI).
    description: 'Uses the Bootstrap framework LESS source files and must be compiled (not for beginners).'
    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: - 'boots_theme/global-styling' - 'boots_theme/bootstrap-scripts'

    Step 4: install your theme in Drupal UI (Drupal’s administrative interface)

    Visit the /admin/appearance/ page and install your subtheme (install and set to default).

    Bootstrap for Drupal: how to create a subtheme in Drupal 8

    Enjoy =)

    Bootstrap for Drupal: how to create a subtheme in Drupal 8

    If you do your manipulations with the properly installed sub-theme and do not see any changes, there may be an issue hiding in the cache.

    Notice: To clean the cache in Drupal 8:

     $ drush cache-rebuild 

    Also, problem may be in the enabled style aggregation (you can disable it in Drupal UI using the admin/config/development/performance path)

    Bootstrap for Drupal: how to create a subtheme in Drupal 8

    In the future, to avoid confusion, I recommend creating 2 directories inside the themes/ folder (custom/ and contrib/) before downloading the framework:

    Notice: the commands are carried out in the root folder of the site. The site with the given example is called "boots":

     $ mkdir themes/contrib/
    $ mkdir themes/custom/

    a. In the contrib/ directory, we load the contributed theme (drupal.org)

    b. In the custom/ directory where our subthemes are located

    Conclusion

    By following these steps, you can customize and install your Bootstrap subtheme for Drupal 8 in just a few minutes).

    5 votes, Rating: 5

    Read also

    1

    Today’s the day for our Drupal developer’s blog post again, which means a lot of...

    2

    E-commerce in Drupal 8 is a topic of interest for many developers. If you are among them, you’ve come to the right place — our...

    3

    A detailed blog post by our Drupal developer about using Drupal Composer...

    4

    Let’s delve into Drupal module development! Here is a practical guide by...

    5

    "Drupalgeddon", online shops in Drupal 8, the future of hooks and much more...We promise that our today’s conversation with the famous drupaler Andypost will be interesting for developers,...

    Need a quote? Let's discuss the project

    Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

    Join the people who have already subscribed!

    Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

    No charge. Unsubscribe anytime