How to add Bootstrap 4 to Drupal 8+

The Bootstrap is probably the world's most popular framework for building responsive, mobile-first sites. It allows you to design lightweight and modern UI for your website quickly. Also, it supports some customizations if you're able to compile it on your side.

Today the 5th version of the Bootstrap is in its alpha stage, so the 4th version is an actual one. Anyway, most of the concepts we will discuss would stay up to date with the 5th version.

Let's discuss the ways to integrate Drupal 8+ with this beautiful toolkit. To add the CSS and JS files to your site, Drupal needs to define a library and attach it to the specific pages, blocks, and templates or globally for the theme. Since we will use Bootstrap over all the site pages, we will use the last option. Now let's chose the way we will use the CSS and JS for the library definition.

1. Compiled sources

With this option, the library definition will be the following:

bootstrap4:
 version: 1.0
 css:
   base:
     //stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css: {}
 js:
   //stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js: { type: external, minified: true }
 dependencies:
   - core/jquery

This way can be suitable for a quick start with the Bootstrap on the project. You'll be able to use the framework's components and utilities and even do not need to store the dependencies on your repository. However, if you'd like to make some changes later as a primary color, layout columns count, and others, this method of adding Bootstrap won't allow you.

2. SASS sources

You can also use SASS sources. You'll need to download the source files and make all the necessary preparations to compile the sources for a final CSS/JS. Then you'll need to specify the compiled files in the Drupal library definition.

Then you should be able to define the variables and get your Bootstrap with the green color as a primary one, or 16-columns grid layout, and so on.

3. Package manager

You can also install Bootstrap using the npm package manager. It's as easy as to run:

npm install Bootstrap

Also, using npm, you can install the sass compiler and other tools. You'll need to spend extra time configuring all this and bring it together.

4. Radix theme

You can also use the contrib theme, which already has pre-configured package.json to install Bootstrap 4, Sass compiler, webpack module bundler, and even browser-sync.

That's why we used the Radix theme when we decided to develop the Bootstrap 4 based theme for one of our customers.

To include the Radix theme to your project, you need to install it using the composer:

composer require drupal/radix

Then enable it using drush:

drush en components radix -y

Then create a sub-theme:

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

After that, you'll get the theme with SUBTHEME_NAME in your themes/custom folder. The system will set a base theme for it to 'radix', and you'll have package.json and webpack.mix.js in the theme folder.

To install additional dependencies, you'll need to run:

npm install

To build the bootstrap library, you'll need to run:

npm run production

To recompile SASS while developing, you can run:

npm run watch

You probably will notice that after running this command, you'll get the URLs like:

[Browsersync] Access URLs:
 -----------------------------------
       Local: http://localhost:3000
    External: http://172.22.0.6:3000

It is used for the Browsersync functionality. While opening the site by any of those URLs, you'll get the page updated in the browser with the changes made in source SCSS or JS. Just don't forget to change the proxy value in the webpack.mix.js into your sub-theme folder to the URL of your local site.

As we discussed earlier, sometimes, the Bootstrap components' default look is not really what you need. To change the colors, sizes, gaps, and other properties from the default ones defined in the framework, you can modify /themes/custom/SUBTHEME_NAME/src/sass/base/_variables.scss.

These are the ways how you can add Bootstrap 4 to Drupal 8+. If you know more, share via the contact form below, and we'll add them!