Getting Started with Bootstrap 4 using Barrio in Drupal 8

24 Comments / Drupal / By / March 15, 2020 / 8 minutes of reading

Video sections

  • Get Barrio (00:36)
  • Create sub-theme (01:47)
  • Barrio Settings (05:05)
  • Load Bootstrap locally (10:02)
  • Bootstrap library (16:00)

Need to compile Bootstrap 4, then look at Radix (Advanced theme which allows you to compile Bootstrap 4 locally).

Bootstrap is a powerful front-end framework which helps you build sites and web applications faster by offering prebuilt CSS and JavaScript components.

Some of the CSS components it offers are a grid system, buttons, navigation, jumbotron and so much more. On the JavaScript side, it comes with a few useful items such as a modal, collapsible divs, carousel to name a few. Read the Bootstrap documentation to find out more.

Bootstrap in Drupal

If you search for “drupal bootstrap” in Google, the first result will likely be the Bootstrap theme. This theme is the most popular on drupal.org with over 150,000 reported installs. But as of this writing, the theme only supports Bootstrap 3, not version 4 which is the latest.

So if you want to use Bootstrap 4 you’ll need to use another theme until the Bootstrap theme supports version 4.

In this tutorial, you’ll learn how to configure and use the Drupal 8 version of the Barrio theme which uses Bootstrap 4.

Getting Started

Before we can begin, go download the Barrio theme.

Using Composer:

composer require drupal/bootstrap_barrio

Create Sub-theme

The recommended way of using a theme in Drupal is to first create a sub-theme. You’ll never want to use Barrio directly. If you need to customize how things look, i.e., change CSS and override templates, then do it in the sub-theme and not Barrio itself, this way you can keep Barrio 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.

Let’s now look at creating a sub-theme which pulls Bootstrap via a CDN, this is the quickest and easiest way to get started.

Create CDN Sub-theme

1. Go to the bootstrap_barrio directory and copy the subtheme directory into /themes.

2. Change the subtheme directory name to anything you want, I’ll change it to barrio_custom (everywhere you see barrio_custom, use your actual sub-theme name).

Now we need to go through the sub-theme and replace bootstrap_barrio_subtheme to barrio_custom.

3. Rename the following files:

  • _bootstrap_barrio_subtheme.theme -> barrio_custom.theme
  • bootstrap_barrio_subtheme.info.yml -> barrio_custom.info.yml
  • bootstrap_barrio_subtheme.libraries.yml -> barrio_custom.libraries.yml
  • config/install/bootstrap_barrio_subtheme.settings.yml -> config/install/barrio_custom.settings.yml
  • config/schema/bootstrap_barrio_subtheme.schema.yml -> config/schema/barrio_custom.schema.yml

4. Open  barrio_custom.info.yml change the name of the sub-theme and rename the libraries section from bootstrap_barrio_subtheme to barrio_custom.

From this:

To this:

5. Open barrio_custom.theme (formerly_bootstrap_barrio_subtheme.theme) and change the function name:

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

6. Open config/schema/barrio_custom.schema.yml (formerly config/schema/bootstrap_barrio_subtheme.schema.yml) and change the following:

# from:
bootstrap_barrio_subtheme.settings:
# to:
barrio_custom.settings:

7. Open color/color.inc file and change the following:

// From:
'preview_library' => 'bootstrap_barrio_subtheme/color.preview',
// To:
'preview_library' => 'barrio_custom/color.preview',

8. Last but not least, open js/global.js and change the following:

// Change this:
Drupal.behaviors.bootstrap_barrio_subtheme = {
// To this:
Drupal.behaviors.barrio_custom = {

Now that you’ve created a sub-theme go to the Appearance page in your Drupal site and install your sub-theme by clicking on “Install and set as default”.

The front-end of your Drupal site should look something like the image below:

The actual Bootstrap 4 library is being loaded via a CDN which is the default behavior in the Barrio sub-theme and that’s why everything works without downloading the library locally. Of course, this can be changed and we’ll look at how to do that next.

Download Local Version of Bootstrap

In the sub-theme we created above, we’re pulling in Bootstrap through the CDN. Let’s configure it now to use a local version of Bootstrap.

1. Go to the Download page and click on Download in the “Compiled CSS and JS” section.

2. Extract the zipped file into /libraries directory in your Drupal site and rename the folder to bootstrap. 

The path to the css and js folder should be /libraries/bootstrap/css and /libraries/bootstrap/js.

3. Open up *.libraries.yml in your sub-theme, mine is called barrio_custom.libraries.yml and change the bootstrap section like so:

From this:

bootstrap:
  js:
    /libraries/popper/popper.min.js: {}
    /libraries/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}

To this:

bootstrap:
  js:
    /libraries/bootstrap/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootstrap/css/bootstrap.min.css: {}

Bootstrap 4 has two dependencies Popper and jQuery. Drupal comes with jQuery already and to save a bit of effort will use the bootstrap.bundle.min.js which comes with Popper whereas, bootstrap.min.js doesn’t.

4. Open the *.info.yml file in your sub-theme and change barrio_custom/bootstrap_cdn under libraries to barrio_custom/bootstrap.

From this:

libraries:
  - barrio_custom/bootstrap_cdn
  - barrio_custom/global-styling

To this:

libraries:
  - barrio_custom/bootstrap
  - barrio_custom/global-styling

5. Rebuild the site cache by running drush cr or drupal cache:rebuild or by going to /admin/config/development/performance and clicking on “Clear all caches”.

If the JavaScript or CSS file isn’t loading or the site looks broken. Make sure the paths in the *.libraries.yml file is correct and that the Bootstrap library is correctly in the /libraries directory.

Theme Settings

The Barrio theme allows you to configure a lot through the Settings page, which you can access by clicking on the Settings link after you’ve activated the theme. I won’t go through absolutely everything, however, I’ll mention some important settings.

To access the settings page, click on Appearance in the toolbar and Settings next to the installed theme.

Layout Settings

From the Layout tab, you can configure aspects of the layout such as the type of container, i.e., fluid or non-fluid and how wide the sidebar columns should be.

If you select “Fluid container”, then your website will be full-width with gutters on each side.

The “Sidebar first layout” and “Sidebar second layout” let you configure the width of each sidebar.

Components Settings

From the Components tab, you can configure the buttons and the navbar.

The most important section in this tab is the navbar. It lets you configure it without having to modify any CSS or SASS files.

Affix Settings

In this section, you can configure components like the navbar or sidebar to be affixed to the top when scrolling.

If you check “Affix navbar”, it’ll stick the navbar to the top as you scroll down the page.

Here’s an example:

Scroll Spy

In this area, you can configure the Scrollspy functionality in your Drupal Bootstrap site.

Fonts Settings

From the Fonts tab, you can configure what fonts will be used and icon set.

Colors

And finally, from the Colors tab, you can configure the color of the messages and how tables are displayed.

Color Scheme

One thing I do like about Barrio which is different to the Bootstrap theme is the ability to change the color scheme directly in the theme.

Now, this isn’t groundbreaking and Drupal’s had this ability for a long time, but being able to easily change colors without modifying CSS or compiling SASS is a nice touch.

However, there is a limitation on which colors can be changed. You can’t change Bootstrap colors: primary, secondary, success, danger, warning or info from the color scheme section.

So that is a quick overview of the settings page. My guess is you’ll spend most of your time configuring the navigation bar and grid layout. But do spend some time familiarizing yourself with the options available.

Bootstrap Library

Another way to load Bootstrap is by using the Bootstrap Library module. One of its benefits is the ability to change which version of the CDN library you want to use without modifying the *.libraries.yml file in your sub-theme.

1. Start things off by first downloading the module and then installing it.

composer require drupal/bootstrap_library

2. Go to the Settings page of your sub-theme and scroll to the bottom and from “Load library” choose how you want the library to be loaded.

  • CDN: This will load Bootstrap through a CDN.
  • Local non minimized (development): This will use the non minified version stored in the /libraries directory
  • Local minimized (production): This will use the minified version stored in the /libraries directory.

As long as you’ve downloaded Bootstrap and added it into the /libraries directory as explained early, the “Local non minimized” and “Local minimized” should work.

Bootstrap Library Settings

The Bootstrap Library module comes with a configuration page, just go to Configuration and click on Bootstrap Library.

If you choose None from “Load library” on the theme settings page, then whichever way Bootstrap is configured to load from this page is what will be implemented.

From this “Load Boostrap from CDN” section, you can choose if a CDN is used and which version. If you prefer to load Bootstrap locally, then select “Load locally”.

Then from “Minimized, Non-minimized, or Composer version” select which local version you want to use.

Form “Theme visibility” select which themes will have Bootstrap loaded.

Make sure you select your theme from the multi-select or the library will not load and your site will be broken.

From the “Activate on specific URLs” section, you can include or exclude the library on specific paths.

From the “Files settings” you can choose if you want CSS and/or JavaScript files loaded.

If you decide to use Bootstrap Library to load the library then make sure your sub-theme isn’t loading the library itself because you’ll end up loading the library twice.

Remove any library declarations from the *.info.yml file in your sub-theme. This will stop your sub-theme from loading the library.

Rebuild the site cache and you’re good to go.

Summary

The current state of Bootstrap in Drupal 8 is this. If you need to use Bootstrap 3, then use the Bootstrap theme. If, however, you want to use Bootstrap 4 then look at Barrio, Bootstrap4, BootBase or Radix.

If you know of any good Bootstrap 4 base themes then please leave a comment.

Related Posts

About The Author

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.

24 thoughts on “Getting Started with Bootstrap 4 using Barrio in Drupal 8”

      1. Richard Bryant

        Ivan,
        I can’t get a radix subtheme to build no matter which set of instructions. All of the ways to run “watch” fail.
        Dick

        Reply
  2. Joel

    i’ve used to composer to install barrio and then copied subtheme into main theme folder, etc. but I can’t see a libraries directory anywhere? do I need to create one fresh, or should the install come with a libraries folder?

    Reply
  3. Joel

    HI, after completing step 5,via “drush cr” in terminal,
    my site reverted to a white page / “unexpected error…” warning,
    “ArgumentCountError: Too few arguments to function skinr_ui_entry_view(). 4 passed and exactly 5 exeptected….
    followed by 50 or so more lines of errors
    SO…. I used Terminal to uninstall Skinr, via:
    composer remove drupal/skinr
    This removed that error,
    But it was replaced by a new white page / error : “unexpected…. the module skinr does not exist…” and 30-40 lines of error code.
    So… I then rebuilt the cache again via: drush cr
    and I can see my site again,
    except now whenever I click on the EXTEND or CONFIGURATION sections of the site I get many lines of errors and warnings relating to skinr being missing.
    any idea how i deal with this?

    Reply
    1. Ivan Zugec

      Hi Joel,

      Few things.

      First, maybe Skinr is not compatible with Barrio.

      Now if you’re getting an error once removed, means that there’s some configuration in your site pointing to skinr. One workaround is to add the module back in, then remove any configuration around the module then remove the module.

      Hope this helps.

      Cheers,
      Ivan

      Reply
  5. Jesandy

    Nice post, thank you for sharing, love your videos too

    Have some question: after using Barrio Theme on my D8 site and I feel already follow all your tutorial above, my Barrio theme layout seems not in proper place.
    First whenever my content has the image size more than col size (with Media core module activate), the layout seems broken especially with the sidebar and main content. Well I solved this one through css custom. although in my onion it shouldn’t have to be this way, it is different from the bootstrap 3 theme D8, all image automatically on the right position and responsive
    Second, in single node, the comment form section and comment display become smaller and is not align with main content

    Did i miss something??

    Thanks Ivan and have a nice day

    Reply
  6. Susanne Tamir

    Hi Ivan
    I think i learned most of you about Drupal and this tutorial changed all my workflow. I use Bootstrap3 quit a time together with Drupal and its not RTL compatible. I foud a css librairy on Github to make Bootstrap 3 working RTL but then it does not work any more both directions.I see 4 is compatible with RTL in a special download. I will try your way to download the RTL version with Drupal Librairies. Would like to know if there is a way to get a bootstrap 4 Drupal Site with Barrio Subtheme that actually is able to be a bilingual site that is Hebrew English? Thanks a lot Susanne

    Reply
  8. hendry

    Hello Ivan,
    Thank you for the reply. I did try using the documentation on drupal before but always get a browsersyn error when i run “gulp” at the end.

    Regards,
    Hendry

    Reply
  9. Nick

    I’m having trouble changing the regions to my own custom regions within this sub theme that was created. I added a region to the info.yml file and i added the {{ page.region }} part to the template page. But it doesn’t show up in the display demonstration. It shows in the block page but when I put a block in the region I created it doesn’t show. Any ideas?

    Reply
  10. Em

    I have loaded Barrio via CDN and created my own sub-theme. I have modified the page.html.twig and page–front.html.twig with the Jumbotron; the front having the addition of a button in the Jumbotron vs the standard page. So Bootstrap 4 appears to be working. I am running into issues with the Main Navigation. If I place it in the Primary Menu region it displays fine horizontally but as I pull back the size, there isn’t a responsive result (as the size gets below what ever breakpoint is set at the menu simply disappears; no vertical and no hamburger.) If I move the Main Navigation to the Header Region I get a partial responsive result in that the menu shifts from horizontal to vertical stack as the breakpoint is hit; but I do NOT get any hamburger to open and close the vertical menu. I have tried all sorts of stuff from adding a jquery dependency even though I am loading via CDN to remarking out the Jumbotron to replacing the menu–main.html.twig file in my subtheme with a renamed copy of menu–toolbar.html.twig out of the core/modules/toolbar/templates directory to removal of any and all custom CSS called in global-styling to shifting from my custom subtheme back to the native barrio_subtheme 8x-4.22 ; and so far nothing is fixing the menu response result I described. Any hints?

    Reply
  11. Em

    Ivan,
    We can mostly close this out but I wanted to post back what I ultimately found out after continued searching for answers. The darn thing was sort of there all along; or at least the active spot if not the icon. But I could never see it because the theme colors on the default settings of the color options made it the same color as the surrounding space. This was reported over on StackOverflow (or something similar enough to give me a heads up). So I found the key syntax in a developer view of the page to identify the key class name and dropped in a quick CSS file I called from the libraries.yml file and applied a different background color. The spot showed up and it was active to open and close the vertical display of the menu. Next I will get the target to pull a hamburger icon into the spot and be all set after styling it. In my case, the CSS I slipped in to expose it was …

    .navbar-toggler-icon {
    background-color: #549EC4;
    }

    Hope this helps the next person being able to find the answer more quickly.

    Reply
  12. Angel

    Hello, we followed this and built a D8 site with Barrio, now our problem is how should we update/develop it. Are there best practices ? For now we just dump the dev database and dev files over the production ones, which is not o.k., because we lose the form data and stats. If we work directly on the production, then the users will see interruptions and unpleasant things….

    Reply
    1. Ivan Zugec

      Hi Angel,

      What you’re after is a development/deployment workflow.

      You’ll need to understand the Drupal configuration management system. https://www.drupal.org/docs/8/configuration-management

      Then start by googling “Drupal deployment workflow” and “Drupal development workflow”. There’s a lot of tutorials out there about it.

      That’s all I can really offer as a reply to your comment. The topic is fairly complex.

      Cheers,
      Ivan

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.