Getting Started with Bootstrap in Drupal 8

52 Comments / Drupal / By Ivan Zugec / May 15, 2019 March 25, 2021 / 12 minutes of reading

This tutorial focuses on Bootstrap 3 and it’s been updated for 8.x-3.19 which comes with a new starter kit. You’ll need Bootstrap 8.x-3.19 and above to follow this tutorial.

Looking for a Bootstrap 4 theme for Drupal 8, then look at:

Update May 2019: This tutorial has been updated for Bootstrap 8.x-3.19 which comes with a new starter kit. You’ll need 8.x-3.19 and above to follow this tutorial.

Bootstrap is a front-end framework for building websites. It ships prebuilt CSS and JavaScript components that make building sites fast. It comes with all sorts of common components that every website needs such as a grid system, buttons, drop-down, responsive form elements, carousel (of course) and so much more. As a developer, I don’t want to spend time styling yet another button. I just want to know which CSS class to add to an <a> tag so it looks like a button and I’m good to go.

One complaint about Bootstrap is you can spot it a mile away because a lot of developers use the default look-and-feel. When you see the famous Jumbotron you know it’s a Bootstrap site. But with a little bit of effort, you can make your site look unique.

Now, another good reason to use Bootstrap is when you’re working with an agency who will design the site but has no Drupal expertize. If they can supply HTML wireframes using Bootstrap then it’s much easier to implement them into Drupal. Yes, in the perfect world it’ll be great to receive a fully built Drupal theme which can be enabled and that’s it. But in reality, most design agencies, unless they specialize in Drupal, don’t know it and this is where Bootstrap can help.

By using Bootstrap, it’ll be easier to work with designers and design agencies because you can discuss things using Bootstrap terminology. For example, a designer may ask, “can we have a sidebar on the right which is 3 columns wide”? Or, they may ask, “make this button on the blog listing page small”.

If you have experience using Bootstrap you should know what I mentioned above.

Luckily for us building a Drupal site using Bootstrap is easy thanks to the Bootstrap theme.

In this tutorial, you learn the following:

Bootstrap theme configuration
Create a Bootstrap sub-theme
Compile Bootstrap locally using Sass

Table of Contents

What About Bootstrap 4?

The Bootstrap theme as of this writing only supports Bootstrap 3. For details look at #2554199 in the issue queue.

Other Bootstrap Based Themes

Another theme you should evaluate is the Radix theme. If you know of any other Bootstrap based themes please leave a comment.

Getting Started

Before we can begin, go download the Bootstrap theme from drupal.org.

If you use Composer, run the following:

$ composer require drupal/bootstrap

Configuring Bootstrap Theme

Before we jump into the advanced topic of sub-theming or compiling Sass. Let’s first look at what the theme offers out-of-the-box. In this section, we’ll look at some of the theme options.

The level of configuration in a Drupal theme varies a lot, however, the Bootstrap theme has a healthy amount of options. Enough to give you flexibility but not too much that you’re overwhelmed or confused.

Once you’ve downloaded the theme go to Appearance and click on “Install and set as default” on the Bootstrap theme.

Once installed click on “Settings”.

Bootstrap Settings

From the “Override Global Settings” you can configure common Drupal options such as the logo or favicon. If you’ve configured a Drupal theme in the past this should look familiar.

The vertical tabs under “Bootstrap Settings” is where you can configure specific Bootstrap options, let’s look at a few.

Fluid container

The “Fluid container” option, which can be accessed by going to General then Container, this option adds the container-fluid class which’ll display the main region at full width. By default, the main region has a width of 1200px.

For more details check out the Containers section.

Images

While still under General, click on the Images field-set. This option let’s you configure how images will be handled.

Leave “Responsive Images” checked. This adds an img-responsive class to images making them responsive. It adds a max-width:100% so images are resized when viewed on mobile.

The “Default image shape” drop-down allows you to choose a different style for images which is done via CSS. I always leave this set to “None”.

For more details check out the Images section.

CDN

Let’s now jump down to the “CDN” section.

In this section, you can configure if Bootstrap will be served from a CDN and which version you want to use.

Theme

From the “Theme” drop-down you can choose a different theme. Most of the options come from Bootswatch.

So your Bootstrap site could go from this:

To this:

Tip: After I selected a theme I had to rebuild the site cache. Go to Configuration, Performance and click on “Clear all caches”. By the way, I chose Slate if you’re wondering.

Loading Bootstrap via a CDN is quick to set up, but hard to customize. If you’re planning to use a CSS processor such as Sass or Less then you’ll need to store Bootstrap locally and compile it.

We didn’t cover every option under “Bootstrap settings”, just the main ones. The rest you can figure out on your own.

Create Bootstrap Sub-theme

So far we’ve looked at changing options within the theme which is great for testing, but if you’re going to use Bootstrap on a proper project then it’s recommended you create a sub-theme.

Why Sub-theme?

When you create a sub-theme, the Bootstrap theme will be the “base theme” which means your sub-theme will automatically inherit all templates and assets such as the CSS and JavaScript.

Your sub-theme will automatically use any template from the base theme unless it’s overridden. If you want to modify the page.html.twig then simply copy it from Bootstrap into your sub-theme templates directory and customize. Drupal will automatically pick up the page.html.twig in your sub-theme instead of the one in Bootstrap.

You should never modify the Bootstrap theme. This way you can keep the Bootstrap theme up-to-date.

If you want to learn more about sub-themes in general. Check out the Creating a Drupal 8 sub-theme, or sub-theme of sub-theme documentation page.

Bootstrap Sass Sub-themes

The way you create a sub-theme can vary. Some themes offer a Drush command to create a sub-theme while others offer starter kits which you just copy and change a few file names.

Bootstrap comes with a single starter kit sub-theme which can be configured to pull in the library via a CDN or compile it locally using Sass or Less. The sub-theme is located in the starterkits folder in the theme.

NOTE: Older versions of the Bootstrap theme (8.x-3.18 and below) had a separate starter kit theme for CDN, Sass and Less. With the latest version of Bootstrap (8.x-3.19), now there’s a single starter kit sub-theme.

Step 1: Create Sub-theme

Let’s now create a sub-theme and we’ll use Sass to compile Bootstrap, we won’t use a CDN. Why Sass? Well that’s my CSS pre-processor of choice.

If you want to just create a CDN sub-theme, click here.

1. Go into the Bootstrap theme and copy the THEMENAME folder from starterkits and then paste the folder into /themes/custom.

2. Rename the folder from THEMENAME to bootstrap_sass (you can rename it to whatever you want). Once copied and renamed, the path to the sub-theme should be /themes/custom/bootstrap_sass.

Are you required to add sub-themes into a custom folder? No, it’s just best practice when it comes to managing sub-themes.

Your themes folder should look something like this:

3. In the bootstrap_sass sub-theme, replace all instances of THEMENAME in the file name to bootstrap_sass.

Look for the following files:

THEMENAME.libraries.yml => bootstrap_sass.libraries.yml
THEMENAME.starterkit.yml => bootstrap_sass.info.yml (NOTE: make sure you change starterkit to info)
THEMENAME.theme => bootstrap_sass.theme
/config/install/THEMENAME.settings.yml => bootstrap_sass.settings.yml
/config/schema/THEMENAME.schema.yml => bootstrap_sass.schema.yml

4. Now we need to open up a few files and perform a find and replace on the string THEMENAME.

Open the following files:

bootstrap_sass.info.yml: Give your sub-theme a name such as “Bootstrap Sass” and find all THEMENAME and replace them with bootstrap_sass.
/config/schema/bootstrap_sass.schema.yml: Find all instances of THEMENAME and replace with bootstrap_sass.
/config/install/bootstrap_sass.settings.yml: Uncomment cdn_provider and make sure it’s an empty string. This will stop the sub-theme from using the Bootstrap CDN.
bootstrap_sass.libraries.yml: Open the libraries file and uncomment the JS section for SASS.

Step 2: Download Bootstrap

In the above section, we just copied a folder and did a find and replace in the THEMENAME string. Now we need to download the actual Bootstrap library and compile the Sass.

1. Go to the Bootstrap Getting Started page and download the Sass version.

2. Extract the downloaded file into bootstrap_sass, once extracted the path should be bootstrap_sass/bootstrap. You may have to rename the folder after it’s extracted.

Step 3: Download Drupal Bootstrap Styles from Github

We need to download an extra bit of Sass styling which integrates Drupal and Bootstrap. All this customization is in the drupal-bootstrap-styles git repo. We do not need all the files in the repository, what we are just after the scss folder in the src/3.x.x/8.x-3.x.

First, download the files in the repository by clicking on “Clone or download” then “Download ZIP”.

Go to src/3.x.x/8.x-3.x in drupal-bootstrap-styles and copy the scss folder into bootstrap_sass.

One of the benefits of compiling Bootstrap is the ability to change colors, heading sizes or even the width of the grid. This can all be done by changing the Sass variables located in bootstrap/assets/stylesheets/bootstrap/_variables.scss. Now you shouldn’t change the variables directly in _variables.scss, instead copy the variables you want to change into scss/_default-variables.scss. The next time you compile Bootstrap those variables in _default-variables.scss will override the ones in the library.

It’s recommended that you only copy over the variables needed. Do not copy the whole _variables.scss file into _default-variables.scss as this will make it harder to debug styling issues.

Step 4: Compile Sass using Laravel Mix

The final piece to complete this sub-theme is to compile Sass. I won’t go into details on how to install and configure Sass, that’ll be a whole tutorial or two on it’s own. Instead, I’ll show you one of many ways to compile Sass. We’ll use Laravel Mix which is a wrapper on top of webpack. Before you begin make sure you download and install Node.js.

1. Go into the sub-theme directory and create a package.json, you can do this by running the following command:

$ npm init -y

Just follow the prompts. Once complete you should see /themes/custom/bootstrap_sass/package.json.

2. Then install Laravel Mix with the following command:

$ npm install laravel-mix --save-dev

Also, download the cross-env package which is required for the scripts to run Laravel Mix.

$ npm install cross-env --save-dev

3. In the sub-theme create another file called webpack.mix.js and add the following to it:

let mix = require('laravel-mix');

mix.sass('scss/style.scss', 'css/');
mix.options({
  processCssUrls: false
});

The code above is pretty straightforward, it’ll tell Laravel Mix to compile scss/styles.scss into the css directory. Once compiled there will be a single file styles.css and the path will be css/styles.css.

4. Open up package.json and replace the scripts section with the one below:

  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },

This adds NPM scripts which you’ll need to use to compile the Sass. You’ll need to run these commands from within the sub-theme.

The two important scripts are:

$ npm run watch

Use this script to automatically compile when a file is changed. This should be used locally while developing a site.

$ npm run production

This script should be run when you’re ready to deploy to production. It’ll uglify the CSS and JavaScript file to reduce the size.

Blocks Placements after Installing Sub-theme

When you enable your sub-theme your site could look weird or broken. It could look something like this:

Don’t worry, nothing is wrong you just need to add the blocks into the right regions.

Go to Structure, “Block layout” and rearrange the blocks into the following regions:

Navigation:

Site branding

Navigation (Collapsible):

Main navigation
User account menu

Top Bar:

Breadcrumb
Status messages
Page title
Tabs
Primary admin actions

Help:

Help

Content:

Main page content

Secondary:

Search
Tools

Footer:

Powered by Drupal
Footer menu

Create CDN Bootstrap Sub-theme

In the section above we focused on creating a Sass sub-theme. Here are the quick steps on how to create a CDN sub-theme, this type is simpler to create than a Sass one.

1. Make a copy of THEMENAME located in starkerkits in the Bootstrap theme into the themes directory. I’ll name the sub-theme bootstrap_cdn.

2. In the bootstrap_cdn sub-theme, replace all instances of THEMENAME in the file name to bootstrap_cdn.

Look for the following files:

THEMENAME.libraries.yml => bootstrap_cdn.libraries.yml
THEMENAME.starterkit.yml => bootstrap_cdn.info.yml (NOTE: make sure you change starterkit to info)
THEMENAME.theme => bootstrap_cdn.theme
/config/install/THEMENAME.settings.yml => bootstrap_cdn.settings.yml
/config/schema/THEMENAME.schema.yml => bootstrap_cdn.schema.yml

4. Now we need to open up a few files and perform a find and replace on the string THEMENAME.

Open the following files:

bootstrap_cdn.info.yml: Give your sub-theme a name such as “Bootstrap Sass” and find all THEMENAME and replace them with bootstrap_cdn.
/config/schema/bootstrap_cdn.schema.yml: Find all instances of THEMENAME and replace with bootstrap_cdn.

Summary

I hope now you have a better understanding of how to use Bootstrap in your next Drupal project. From a developer’s perspective, it’s great because you can focus on building the site without dealing with small design issues such as styling a button. The Bootstrap theme has a good mix of configuration and flexibility. You can use the theme to quickly spin up a website, however, it’ll look very Bootstrappy. Or you can still use it if you want to fully customize the look-and-feel by compiling it yourself.

Other Bootstrap Modules for Drupal 8

There’s a whole bunch of modules which help you use Bootstrap in other parts of Drupal. There’s a page on drupal.org called Bootstrap related modules which lists them out. The two modules I always use with Bootstrap in Drupal 8 is Bootstrap Layouts and Bootstrap Paragraphs.

Bootstrap Layouts lets you configure a layout using its grid system in Panels and Display Suite. Bootstrap Paragraphs ships a bunch of pre-built paragraph types for Bootstrap.

FAQs

Q: I created a sub-theme but I can’t see it on the Appearance page?

Make sure you change THEMENAME.starterkit.yml to bootstrap_sass.info.yml, replace starterkit with info.

Q: I enabled my sub-theme but the site looks broken.

This can happen when you enable a sub-theme before the parent. The simple workaround is to uninstall your sub-theme and then install the Bootstrap theme first, then install the sub-theme.

Q: None of the JavaScript files are getting loaded?

First, make sure you renamed THEMENAME.libraries.yml to bootstrap_sass.libraries.yml. Then in bootstrap_sass.info.yml make sure you update the libraries sections.

From this:

libraries-extend:
  bootstrap/framework:
    - THEMENAME/framework

To this:

libraries-extend:
  bootstrap/framework:
    - bootstrap_sass/framework

Also, make sure you uncomment the right JS section in the THEMENAME.libraries.yml depending on how you’re compiling Bootstrap. It needs to look like the following for Sass:

framework:
  css:
    theme:
      css/style.css: {}
  js:
    bootstrap/assets/javascripts/bootstrap/affix.js: {}
    bootstrap/assets/javascripts/bootstrap/alert.js: {}
    bootstrap/assets/javascripts/bootstrap/button.js: {}
    bootstrap/assets/javascripts/bootstrap/carousel.js: {}
    bootstrap/assets/javascripts/bootstrap/collapse.js: {}
    bootstrap/assets/javascripts/bootstrap/dropdown.js: {}
    bootstrap/assets/javascripts/bootstrap/modal.js: {}
    bootstrap/assets/javascripts/bootstrap/tooltip.js: {}
    bootstrap/assets/javascripts/bootstrap/popover.js: {}
    bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}
    bootstrap/assets/javascripts/bootstrap/tab.js: {}
    bootstrap/assets/javascripts/bootstrap/transition.js: {}

About The Author

Ivan Zugec

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

52 thoughts on “Getting Started with Bootstrap in Drupal 8”

Henrique
January 25, 2018 at 3:36 am

My drupal 8 pilgrimage would not be the same without your help Thanks

Reply
1. Ivan Zugec
  January 27, 2018 at 12:54 pm
  
  No problems. 🙂
  
  Reply
Alex
February 14, 2018 at 2:34 pm

if you receive “Module build failed: Error: ENOENT: no such file or directory…” error
just run:
nodejs node_modules/node-sass/scripts/install.js
npm rebuild node-sass

Reply
1. Ivan Zugec
  February 14, 2018 at 10:08 pm
  
  Thanks for the tip Alex.
  
  Reply
Jolie
March 4, 2018 at 8:28 pm

Step 2: Download Bootstrap
Can we use bootstrap 4.0 version ? and how? Thank you for your support.

Reply
1. Ivan Zugec
  March 4, 2018 at 8:42 pm
  
  Hi Jolie,
  
  I cover this exact question in the “What About Bootstrap 4?” section of the tutorial.
  
  Cheers,
  Ivan
  
  Reply
Mateusz
March 7, 2018 at 7:06 pm

Hi Ivan,

First of all great page, great tutorials, thanks in advance for your great work!

One thing that concerns me in themes for Drupal in general is I could not find any way to add to a theme information what blocks should be applied to what regions. This is confusing because many times i need to figure it out by myself to properly reproduce theme design. I know you mentioned in FAQs load parent first but many themes has it’s owns regions and default blocks aren’t fit and i couldn’t find any recipe attached to themes how this should be configured. I know that styling is tend to be independent from regions but many times in the end theme ended up missing some important sections like for an instance menu. Is there any pattern or design principle that i should stick to?

I wish that at the moment there’s no well tested BT4 theme, Barrio theme seems to be most proper for this case.

Thanks

Reply
1. Ivan Zugec
  March 7, 2018 at 9:22 pm
  
  Hi Mateusz,
  
  I totally agree, knowing which region a block belongs to is difficult.
  
  The placement of the blocks is stored in configuration YAML files. Most themes ship them in the config/install folder. So the best place to look for them is in there.
  
  Cheers,
  Ivan
  
  Reply
Logan
May 22, 2018 at 4:04 pm

These node commands don’t work in windows. To make it work, need to install “cross-env” node package and change command like below one.

“watch”: “cross-env NODE_ENV=development node node_modules/webpack/bin/webpack.js –watch –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”,

Reply
1. mmcnairy
  October 31, 2018 at 6:24 am
  
  This also solved the problem for me on Windows 10 machine.
  
  Reply
Guillaume Duveau
June 5, 2018 at 10:44 pm

Hi, thanks for this! FYI : as of now, works perfectly with yarn with node v10.1.0.

Reply
1. Guillaume Duveau
  June 6, 2018 at 12:53 am
  
  Sorry for double posting. On my Ubuntu, I just have to add –watch-poll to the watch script, so it becomes:
  
  “watch”: “NODE_ENV=development node_modules/webpack/bin/webpack.js –watch –watch-poll –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”,
  
  Reply
  1. Guillaume Duveau
    June 6, 2018 at 1:13 am
    
    Lasty, you can easility set up BrowserSync :
    
    add this line in webpack.mix.js:
    
    mix.browserSync({
    proxy: ‘eqco:8080’
    });
    
    where eqco:8080 is my local domain and port for dev (you could use just ‘localhost’ or ‘localhost:8080).
    
    Under Ubuntu I have to increase inotify limit : https://github.com/BrowserSync/browser-sync/issues/224#issuecomment-98299425
    
    Reply
    1. Ivan Zugec
      June 6, 2018 at 9:04 am
      
      Thanks for the notes.
      
      Reply
Alberto
June 30, 2018 at 1:31 am

For Bootstrap 4 and SASS ibtegration I suggest to take a look to https://www.drupal.org/project/bootstrap_barrio

Reply
Evrim C.
July 16, 2018 at 8:23 am

Hi, I am stuck on Step 2: Download Bootstrap 1.
I used CDN to name my theme knowing Bootstrap CDN is available on the Download page.
Is there another way to complete the steps with CDN or do we all need to use SASS?
Thanks.

Reply
1. Ivan Zugec
  July 17, 2018 at 9:49 pm
  
  Hi Evrim,
  
  From the starter kit just copy the cdn folder instead of the sass one.
  
  Cheers,
  Ivan
  
  Reply
Gabriel
August 19, 2018 at 4:18 pm

Great tutorial. Cheers from Argentina!

Reply
1. Ivan Zugec
  August 21, 2018 at 9:46 am
  
  Thanks.
  
  Reply
Lorraine Jones
October 12, 2018 at 2:48 am

Hello, Im quite new to all this and produced all my Bootstrap themes using the CDN, as that was how I learned, 12 months ago when I started, using SASS would have blown my mind, but managed to follow your tutorial (ive never seen let alone used Laravel before) thank you

Reply
1. Ivan Zugec
  October 12, 2018 at 9:40 am
  
  I’m glad you found it useful.
  
  Reply
Ehmar
November 9, 2018 at 1:13 am

Thanks for the article. Drupal theming (especially Drupal 8) is very confusing.
I managed to follow your guide to setup a SASS subtheme, but still see two references to CDN in my page source.
A stylesheet at cdn.jsdelivr.net/bootswatch/3.3.7/cerulean/bootstrap.min.css
And a script at cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js
I can’t seem to find these urls anywhere in the subtheme folder. Did I miss something? I assumed everything would be loaded locally.
I’m Using Drupal 8 & Bootstrap module 8.x-3.13
Appearance / Settings / Bootstrap / Advanced / CDN Provider is set to “None”
Thanks again.

Reply
1. Ivan Zugec
  November 11, 2018 at 9:53 pm
  
  Hi Ehmar,
  
  If you can’t find the references in the sub-theme, check in the base theme, i.e., Bootstrap.
  
  Are you using the Bootstrap library module?
  
  Did you use the sass starterkit when you created the sub-theme?
  
  Cheers,
  Ivan
  
  Reply
  1. Ehmar
    November 12, 2018 at 4:07 am
    
    That was odd.
    
    The base theme was still set to CDN Deliver (which seems “correct”). Changing that to “None” also broke the subtheme (that must be where CDN was coming from). I changed the base theme back to CDN (subtheme still set to “None”), cleared the Drupal cache a few times in the process, and now it seems to be working properly.
    
    Thanks for the extra tips where to look. I copied the sass starter kit from the base theme, and downloaded the sass library from getbootstrap.com (like your article). I didn’t have to touch any of that, just toggle the base CDN and clear the Drupal Cache (though I’m sure I’ve cleared the cache several times after creating the subtheme).
    
    Thanks again,
    
    Reply
Mark
December 2, 2018 at 4:34 am

Great Information, Ivan. I watched the YouTube version and ran into a problem, so double checked my work here. I think I have everything right. I am running using vagrant, virtualbox, ubuntu on a windows 10 machine. Any insight on the following?

Below is the error message that I get when running the command ‘npm run dev’.

C:\Users\Dev\virtualmachines\Drupal8\drupal\web\themes\custom\bootstrap_sass
λ npm run dev
npm ERR! file C:\Users\Dev\virtualmachines\Drupal8\drupal\web\themes\custom\bootstrap_sass\package.json
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected string in JSON at position 919 while parsing ‘{
npm ERR! JSON.parse “name”: “bootstrap_sass”,
npm ERR! JSON.parse “version’
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Main\AppData\Roaming\npm-cache\_logs\2018-12-01T17_29_37_104Z-debug.log+

Reply
Mark
December 2, 2018 at 5:33 am

Update to my last post…
1. used JSON Parser to cleanup the ‘package.json’ errors
2. followed the advice of Logan in his comment on May 22, 2018 at 4:04 pm:
…at the command prompt entered ‘pm install -g cross-env’
…added ‘cross-env’ to the Dev Script in package.json

Reply
1. Ivan Zugec
  December 2, 2018 at 9:14 am
  
  Hi Mark,
  
  That’s good to hear.
  
  Cheers,
  Ivan
  
  Reply
2. Mark
  December 2, 2018 at 12:07 pm
  
  correction…at the command prompt entered ‘npm install -g cross-env’ (I dropped the leading letter ‘n’, when copying earlier.
  
  Reply
Srini
December 19, 2018 at 12:35 am

Hi Ivan,

Thanks a lot for this article.
I love your previous article as well on Bootstrap 3, Bootswatch & Laravel Mix
https://www.webwash.net/getting-started-bootstrap-drupal-8/

Is it possible to implement bootstrap_barrio with bootswatch and laravel mix?
I love bootstrap 4, bootswatch and laravel mix with webpack.
Coud you please guide me on this?

Thanks in Advance,
Srini

Reply
1. Ivan Zugec
  December 20, 2018 at 9:40 am
  
  Hi Srini,
  
  This would require a whole tutorial (or two) to explain. 🙂
  
  Look at using https://www.drupal.org/project/bootstrap_sass or https://www.drupal.org/project/radix
  
  They’ll allow you to compile SASS locally. But, as far as I’m aware, you’ll need to integrate bootswatch yourself.
  
  Cheers,
  Ivan
  
  Reply
  1. Srini
    December 20, 2018 at 10:20 am
    
    Hi Ivan,
    
    Thanks for your reply.
    
    On my Drupal lightning (8.6.x), I added radix and a radix sub theme based on (themes/contrib/radix/src/kits/default). And added bootswatch on my radix subtheme (see below). It works fine.
    
    Note: D8 lightning comes with Drush 9 and radix sub-theme cannot be created with drush.
    So, you have to manually create a sub-theme (copying – themes/contrib/radix/src/kits/default).
    
    on subtheme.style.scss:
    ——————————–
    @import “~bootstrap/scss/functions”;
    //@import “base/variables”;
    @import “~bootswatch/dist/journal/variables”;
    @import “~bootstrap/scss/bootstrap”;
    //@import “subtheme.bootstrap”;
    @import “~bootswatch/dist/journal/bootswatch”;
    
    Hope this helps to someone.
    
    Srini
    
    Reply
Hans Nieuwenhuis
February 18, 2019 at 7:28 am

Hi,
I used this tutorial several times on my sites with succes.
But now I get an error on installing laravel mix
npm install laravel-mix

npm ERR! Maximum call stack size exceeded

Any ideas what causes this ?

Reply
1. Ivan Zugec
  February 19, 2019 at 9:37 am
  
  Hi Hans,
  
  Never seen this error.
  
  I googled it and found https://stackoverflow.com/a/54728845
  
  Are you on Windows?
  
  Cheers,
  Ivan
  
  Reply
Hans Nieuwenhuis
February 19, 2019 at 4:24 pm

Hi, found the cause:
The latest npm install laravel-mix requires that a git client is installed.
I am on alpine ( docker ) so
Apk add git
Solved the problem.
Regards

Reply
murat
March 15, 2019 at 2:37 am

when i run npm run dev i am getting this message and its frezzing on command line do you have any idea what am i doing wrong

Additional dependencies must be installed. This will only take a moment.

Running: npm install sass-loader@7.* sass –save-dev –production=false

Reply
1. Ivan Zugec
  March 16, 2019 at 9:15 am
  
  Hi murat,
  
  I’ve never had that problem.
  
  What OS are you using? Windows, MacOS or Linux.
  
  Cheers,
  Ivan
  
  Reply
Chris
August 16, 2019 at 12:46 am

@ivan I’m having the same problem as Murat — OSX Mojave

Reply
1. Ivan Zugec
  August 17, 2019 at 7:11 am
  
  Hi Chris,
  
  When you run Laravel Mix the first time it’ll download other dependencies.
  
  After it’s done it’ll tell you to run the same command again.
  
  Cheers,
  Ivan
  
  Reply
Olga
August 26, 2019 at 12:51 am

Hi Ivan,
Thank you for you tutorial. It is very helpful. Especially for beginners in Drupal.
However, after all the actions you described in the tutorial my sub-theme doesn’t work. It has an error like the one in the FAQ – site looks broken. I did what you suggest -> uninstall sub-theme, bootstrap theme -> install bootstrap theme first and then sub-theme. But still it has some mistake which is shown on the site instead of my sub-theme. Meanwhile bootstrap theme is working properly.
I have these messages:
Drupal\Core\Asset\Exception\IncompleteLibraryDefinitionException: Incomplete library definition for definition 'js' in extension 'bootstrap_sass' in Drupal\Core\Asset\LibraryDiscoveryParser->buildByExtension() (line 91 of core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php). Drupal\Core\Asset\LibraryDiscoveryCollector->getLibraryDefinitions('bootstrap_sass') (Line: 66)
Drupal\Core\Asset\LibraryDiscoveryCollector->resolveCacheMiss('bootstrap_sass') (Line: 149)
Drupal\Core\Cache\CacheCollector->get('bootstrap_sass') (Line: 144)
Drupal\Core\Asset\LibraryDiscoveryCollector->applyLibrariesExtend('bootstrap', 'framework', Array) (Line: 111)
etc.
What could it be? I googled it but can’t see any relevant info.

Reply
1. Ivan Zugec
  August 26, 2019 at 3:12 pm
  
  Hi Olga,
  
  That PHP error means that your *.libraries.yml isn’t configured correctly.
  
  Look at this link: https://stackoverflow.com/a/34466918
  
  Go into your bootstrap_sass.info.yml and replace THEMENAME with the actual theme name.
  
  Cheers,
  Ivan
  
  Reply
Raj
September 1, 2019 at 10:01 pm

Check your indentation in *.libraries.yml file.

Reply
Ash
September 13, 2019 at 3:53 pm

Hi, thanks for this great tutorial. I’ve been through it 2x and both times I get the error “The website encountered an unexpected error. Please try again later.” with the following log message:

[Fri Sep 13 01:53:03.312612 2019] [php7:notice] [pid 31975] [client xxx.xxx.xxx.xxx:39452] Uncaught PHP Exception Drupal\\Core\\Asset\\Exception\\InvalidLibrariesExtendSpecificationException: “The specified library “THEMENAME/framework” does not exist.” at /usr/local/www/apache24/data/core/lib/Drupal/Core/Asset/LibraryDiscoveryCollector.php line 149

“THEMENAME” is no where to be found anywhere in my “custom/subtheme” directory. I checked before compiling anything (this is a commented out line):
# grep -r THEMENAME *
scss/_default-variables.scss: * ./THEMENAME/bootstrap/assets/stylesheets/bootstrap/_variables.scss

My subtheme.info.yml library location is correct:

libraries-extend:
bootstrap/framework:
– subtheme/framework

Drupal 8.7 – everything else with the site is working great so far. Any ideas?

Reply
1. Ivan Zugec
  September 14, 2019 at 10:45 am
  
  Hi Ash,
  
  The error is about the missing library, “THEMENAME/framework”. Double and triple check you don’t have THEMENAME in your theme.
  
  Cheers,
  Ivan
  
  Reply
Dan
December 5, 2019 at 3:57 am

Thank you for the tutorial. When I set the theme to default I get the following error: “The website encountered an unexpected error. Please try again later.”

Here is the log error message:
Uncaught PHP Exception Drupal\Core\Asset\Exception\IncompleteLibraryDefinitionException: “Incomplete library definition for definition ‘js’ in extension ‘bootstrap_xxxx'” at /mnt/www/html/xxxx/docroot/core/lib/Drupal/Core/Asset/LibraryDiscoveryParser.php line 91

I have double and triple checked that “THEMENAME” is not in the theme. Is there anything else I should look for to resolve this?

Reply
1. Ivan Zugec
  December 5, 2019 at 1:10 pm
  
  Hi Dan,
  
  Is the .libraries.yml file formatted correctly?
  
  This error happens when the yml code in the .yml files is not formatted correctly. For example, an extra space.
  
  Cheers,
  Ivan
  
  Reply
Dan
December 6, 2019 at 2:13 am

Hi Ivan,
That is exactly what the issue was.

I uncommented a fresh copy of the libraries.yml file and now the theme is working.

Thank you again for the great tutorial and your help!

Best regards,
Dan

Reply
Hiroshi
February 4, 2020 at 6:55 am

Hi Ivan,
Great tutorial, thanks. I have a problem here after installing the sub-theme. I replaced all THEMENAME on all project and files, install bootstrap 3 first and then the sub-theme, then after install the sub-theme I have a 500 error but nothing on console, just 500 error: Status Code: 500 500 Service unavailable (with message). Any idea? Thanks

Reply
1. Ivan Zugec
  February 4, 2020 at 8:18 am
  
  Hi Hiroshi,
  
  You need to find out what the error is.
  
  Adjust your server to display errors.
  
  Cheers,
  Ivan
  
  Reply
AntonyM
June 26, 2020 at 8:09 pm

Hi Ivan,
When I activate the subtheme, I’ve have a lot of warning like this :
Warning: file_get_contents(themes/custom/bootstrap_sass/bootstrap/assets/javascripts/bootstrap/affix.js): failed to open stream: No such file or directory in Drupal\Core\Asset\JsOptimizer->optimize() (line 25 of core/lib/Drupal/Core/Asset/JsOptimizer.php).

I have one message like this for each libraries defined in bootstrap_sass.libraries.yml file.
Do you have an idea for resolving it?

Thanks a lot for your tutorial.

Antony

Reply
1. Ivan Zugec
  June 27, 2020 at 11:01 pm
  
  Hi Antony,
  
  Drupal is complaining about not being able to find the JS files. So make sure you have downloaded the bootstrap library into your sub-theme.
  
  Chers,
  Ivan
  
  Reply
David Crellen
September 30, 2021 at 11:21 am

Hi Ivan.
Your tutorial is well done. I especially like how you augment the video with a text document.

I am having a lot of problems getting things going via the terminal. Here is the dialog (I removed the host name and I changed the bootstrap theme name to neueshaus_sass but it’s otherwise created just like your example). It all starts with the “permission denied” return:

[00:58] [server1 neueshaus_sass] # npm run dev
> neueshaus_sass@1.0.0 dev
> NODE_ENV=development node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js
/usr/bin/env: node: Permission denied

[01:01] [server1 neueshaus_sass] # npm run watch
> neueshaus_sass@1.0.0 watch
> npm run development — –watch
sh: npm: command not found

[01:05] [server1.ccx0.net neueshaus_sass] # npm -v
7.24.0

BTW, my opsys system is linux.
Cheers,
–David

Reply
1. Ivan Zugec
  October 1, 2021 at 5:59 pm
  
  I’m glad you found the tutorial useful.
  
  However, NPM issues are outside the scope of this tutorial. You’ll have to debug this further yourself unfortunately.
  
  Reply