How to Use Bootstrap 4 in Drupal 8/9 with Bootstrap Barrio

We are going to use Bootstrap 4 in Drupal 8/9 with Bootstrap Barrio. The Bootstrap Barrio theme for Drupal 8/9 integrates Bootstrap 4 (or Bootstrap 5 if you want) with your Drupal site. 

Bootstrap is a very popular framework for building websites. It provides designers and developers with a common language to communicate, making the development process a lot easier.

Creating a subtheme of Barrio is a straightforward process. This tutorial will explore the basic configuration options of the theme, which are managed through a complete graphical user interface.

Keep reading to learn how!

Step # 1.- Install the theme

Before we start, make sure that your site has at least one article, so you can make a comparison after changing the theme settings. Place also a block inside the region sidebar second (Structure > Block layout > Place block).

• Open the terminal application of your operative system.
• Place the cursor in the root of your Drupal installation.
• Type: composer require drupal/bootstrap_barrio

This will download the latest stable version of the theme to:    /web/themes/contrib/bootstrap_barrio

---

Step # 2.- Create a Subtheme

• Place cursor on the bootstrap_barrio theme directory
• Type:

chmod +x scripts/create_subtheme.sh./scripts/create_subtheme.sh

This will make the script called create_subtheme inside the scripts folder executable, and will also execute it. 

The script will ask for a machine name and a descriptive name for your custom subtheme.

Enter the values that suit best for you. Remember that the machine name has to be lowercase and may not contain spaces.

This step is optional:

• Open the directory of your subtheme (/web/themes/custom/mytheme) in a code editor
• Replace all instances of `Bootstrap Barrio` with `Name of your theme`
• Save all files

Here, we are only changing descriptive text, so there would be no problem at all if you would leave this as is.   

---

Step # 3.- The Bootstrap Barrio Settings

• Click Appearance on the backend of your Drupal site
• Scroll down to your custom theme
• Click Install and set as default

Once the theme has been installed, 

• Click the theme Settings link

You will see a group of vertical tabs on the left side of the screen with the following options: 

1. Layout (active tab)
2. Components
3. Affix
4. Scroll Spy
5. Fonts & icons
6. Colors

Layout

By default is the `Layout` tab active. The first option `Container` specifies if the elements of your site will have a fixed width, or on the contrary will be displayed across the whole size of the screen. Leave this option untouched by now. 

Within the `Region` section, it is possible to assign custom CSS classes to the regions of the site.

• Add your own custom class to a particular region

• Close the `Region` section
• Open `Sidebar position`
• Change the value of `Sidebars position` to Left
• Open `Sidebar first layout` and `Sidebar first layout`
• Change the values to 3 cols and 2 cols respectively

Components

• Click the `Components` vertical tab
• Change the Button element to outline format
• Check Apply img-fluid style to all content images

This will make the images that you insert through the image button of the content editor, responsive by default. The image will scale down to fit the size of the screen.

The `Navbar structure` section deals with the size of the navbar container. You have to differentiate between two navbars (navbar-top and navbar). Navbar is the main navigation menu of your site.

• Change Navbar position to Fixed bottom and Navbar link color to Dark
• Check Sliding navbar on the `Navbar behavior` section, in order to display a sliding main menu on small screens

The 3 last sections of the `Components` configuration option refer to the position of the messages delivered by Drupal’s internal message system, the tabs for locals tasks (like the edit content tab), and the appearance of form elements. Leave these options untouched.

Affix

With affix, it is possible to fix an element, i.e. set the value of the CSS position property to fixed.

Scrollspy

Scrollspy is used to automatically update the links of a navigation menu, based on the position of the cursor, i.e. if you scroll up or down on the site. This topic will be covered in a future tutorial.

Fonts and Icons

Here you have options to choose between different Google Fonts font combinations for the text of your site. Furthermore, you can choose between sets of predefined icons to use on your posts.

• Choose the font combination and the icon set of your liking

Colors

You have here options to customize the color of Drupal’s internal messages. There are options to customize the tables of the site, for example, the ones generated with the Views module.

If you keep scrolling down, you will find the `Color scheme` for your subtheme. You can customize the text and background colors of the default theme regions.

You can customize the color of each element to your liking and block it, by using the lock icon. 

Page Element Display, Logo Image, and Favicon

These are default options in all Drupal themes.  

Load Library

You can choose between multiple online ready-to-use Bootswatch libraries to enhance the look and feel of your theme with just one click. These options are worth checking. 

It is possible to choose here if you want to load Bootstrap (Bootstrap CSS and JS) locally or via a CDN. This configuration should not be altered here. It is much better to change the code in the .info.yml file.

• Click Save configuration

Take a look at your site. This tutorial does not intend to teach you UI design, but rather explain the possibilities available with the Barrio theme. 

However, you can now start from a design and try to adapt the theme to it. 

I hope you liked this tutorial. Thanks for reading!