Getting Started with Bootstrap 4 using Barrio in Drupal 8
Check out other videos on our YouTube channel. Click here to subscribe.
Video sections
- Get Barrio (00:36)
- Create sub-theme (01:47)
- Barrio Settings (05:05)
- Load Bootstrap locally (10:02)
- Bootstrap library (16:00)
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
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.
Originally published at www.webwash.net on October 16, 2018.