Categories

(83)
(69)
(8)
(34)
(74)
(149)

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).

    12 votes, Rating: 4

    Read also

    1

    Sometimes duets may sound even more impressive than solo performers. So meet the Drupal and AngularJS duet! The “music” these two produce together is the harmony of backend and frontend in...

    2

    Being strong, secure, and flexible is exactly what the doctor ordered for any good site! That’s why Drupal is a healthy idea for health care websites as well. Today, we’ve picked some of these...

    3

    Today’s the day for our Drupal developer’s blog post again, which means a lot of attention to detail and practical tips — this time on caching in Drupal 7. We have posts about creating CTools...

    4

    According to the best practices of responsive web design, a website neatly adapts to whatever screen it is viewed on. According to the best traditions of our blog, we make collections of free...

    5

    The images of azure seas, exotic islands and mysterious mountains across the Web are a special magnet to the eyes. Travel websites can be so gorgeous! So we couldn’t resist the temptation to...

    Subscribe to our blog updates