Drupal Bootstrap themes

Bootstrap is an open-source toolkit, which helps to develop the user-friendly design with cool responsiveness. To get more information please refer to their official website. Bootstrap has the most popular front-end component library, which is very quick and useful for users. We use Bootstrap because it provides a wide spectrum of the standard tools, that contain buttons, grid systems, responsiveness, dropdown, sizing, image styles and so so on. CSS classes - are the key tool to manage all the needed site elements. That’s cool, because you as a developer, shouldn’t put lots of effort into styling a particular form or button. On the other hand, if dig deeper, every simple and primitive website can be redesign to a unique style.

Sounds like a fairytale? No worries, step-by-step we will sort out with this fantastic tool.

Last but not least. Bootstrap is cool and super effective in case you never used Drupal before. This applies exclusively to the companies, that develop site designs but have no Drupal expertise, as Bootstrap can be easily integrated into Drupal site, by using the HTML wireframes. Likewise, it’s much easier to cooperate between designer and Drupal developers on the project planning stage, because Bootstrap terminology applies to any programmers.

One more benefit we get - is a ready Bootstrap theme for Drupal.

Getting Drupal 8 Bootstrap 4 theme working

Let us introduce you two bestsellers for you and your Drupal 8 website:

1. Radix
2. Barrio

Let’s get started from Radix

Radix is a free Bootstrap 4 based theme, which is set up out-of-the-box to compile the Bootstrap library locally. One important point, you need to take into the account - Radix doesn't support loading Bootstrap through a CDN (out-of-the-box). In case the project requires this feature we'd recommend you to consider the Barrio theme as a more appropriate one.

Thus, the compiled CSS file can be significantly reduced in case you will be importing only the data you need. In other words, no one forbids to compile Bootstrap by modifying the _variables.scss, that is necessary for managing SASS components to be imported.

Okay, that was a theory, but now let’s go to practice.

Drush and Radix

Please pay your attention Radix 8.x-4.6 theme cooperates with Drush 9, please visit this page to get to know more.

So, before starting any work please make sure you have enough capabilities to continue work with the theme installation:

1. Please download a component libraries
2. and actually Bootstrap Radix theme

With the help of composer use the following command:

composer require drupal/components drupal/radix

Please enable both module and theme after they will be downloaded and installed.

Sub-theme

A good Drupal practice is creating your theme as a SUB THEME in case you need to modify the basic Drupal theme. Here is documentation that will help you to deeply understand the importance of using sub-themes in Drupal.
The provided Drush command below allows us to automatically setup sub theme, instead of renaming files or folders.

Run the following command, but before doing this please make sure that Redix theme is enabled:

drush --include="themes/contrib/radix" radix:create radix_subtheme

(Path "themes/contrib/radix" is just an example)

Compile Bootstrap 4 SASS in Sub-theme

Just a quick check if the provided steps above were successfully followed:
1.1. Download the require module and theme
1.2. Set the downloaded Bootstrap theme as a sub-theme.
The next stage is downloading of all the packages (please make sure that Node.js and npm installed on your local machine) we need to compile SASS files for Bootstrap 4 by running the following command:

cd /themes/custom/radix_subtheme/
npm install

For the Browsersync functionality, change const proxy = 'http://drupal.local'; to the URL of your local site, in the webpack.mix.js in your sub-theme.
There also can be used npm watch command to compile SASS, with the help of it, the site will be autoloading the site during file saving.

The following message will be displayed in case everything is correctly done:

Besides, in the package.json you can see the available npm run scripts:

The last but not least, let us remind two important scripts to use:
npm run watch and npm run production. The last one will help you, during deploying changes to production, significantly reduce CSS and Javascript.

Sub-theme enabling

After the successful running of the npm install and compiling SASS in your sub-theme, welcome to check your theme. In the “Appearance” tab please find a section to select a theme as “Install and set as default”. Please refresh your homepage to see a basic styled Bootstrap 4 site.

Barrio Bootstrap 4 theme

The first step is downloading of the Barrio theme for your Drupal 8 site, let’s use for it, composer:

composer require drupal/bootstrap_barrio

Barrio as a Sub-theme

The quickest and easiest way of creating the sub-theme is pulling Bootstrap via a CDN. Let’s overview it more detailed.

1. In the bootstrap_barrio directory copy the subtheme directory into /themes/custom.
2. Rename the subtheme directory to a random name, in our case it will be barrio_custom.
   Please keep in mind to replace in the sub-theme bootstrap_barrio_theme to barrio_custom.
3. After that, please rename the following files:

1. Then, in barrio_custom.info.yml need to rename the sub-theme and the libraries section from bootstrap_barrio_subtheme to barrio_custom.
   From this:
   To this:
2. After that, go to barrio_custom.theme (previously _bootstrap_barrio_subtheme.theme) and rename the following function:
   // From:
   bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)
   // To:
   barrio_custom_form_system_theme_settings_alter(&$form, FormStateInterface,$form_state)
3. In the config/schema/barrio_my.schema.yml (formerly config/schema/bootstrap_barrio_subtheme.schema.yml) file change the following:
   // from:
   bootstrap_barrio_subtheme.settings:
   // to:
   barrio_custom.settings:
4. In color/color.inc file please change the following:
   // From:
   'preview_library' => 'bootstrap_barrio_subtheme/color.preview',
   // To:
   'preview_library' => 'barrio_custom/color.preview',
5. And the last step, in the js/global.js change the following:
   // From:
   Drupal.behaviors.bootstrap_barrio_subtheme = {
   // To:
   Drupal.behaviors.barrio_custom = {
6. Almost done, guys. So now, please open the “Appearance” tab and set the Barrio theme as by default. After the home page reloading it should look like this:

We believe that this information about Drupal 8 bootstrap themes will help you to make the right decision in choosing the appropriate theme for your Drupal 8 website. Out-of-box tools are easily configured and in 100% they will work correctly. Great site responsiveness, inputs, buttons - everything is perfect configurable. And other important and benefit factor - it is free. Yes, you would say that Bootstrap 4 sites are very recognizable, and yes, we agree with you, but, applying the advanced configurations you will achieve incredible results.

We learn you on how to install Drupal 8 Bootstrap theme on your site as a sub-theme, and now you are free to interact with cool Bootstrap capabilities, that you can read about here.

See you in the next tutorial! Good luck and take care.

Your Golems.