It isn’t enough for the architecture of our web page to be well-designed – the appearance is also important! Drupal comes to our aid when it comes to building websites quickly. Can we count on similar help when creating a modern look? We'll tell you a bit about the extensive library called Bootstrap, which offers a wide range of ready-made components.
Bootstrap
The year was 2011, when a group of Twitter programmers, headed by Mark Otto and Jacob Thornton, introduced the world to an extraordinary tool that was to revolutionize in the future the process of creating a graphical interface – not only for websites but also for applications. They named it Bootstrap and decided to release it under one of the most liberal open source licenses – MIT. Currently, the latest version of Bootstrap is 5.1.
Source: Bootstrap
Bootstrap is a library of cascading style sheets (CSS), which uses ready-made HTML and JavaScript solutions. It provides predefined styles for the commonly used elements on web pages, such as text, headings, buttons, navigations, tables, links, and more. It also ensures that the elements look good in the mobile version. Everything is based on a grid structure made of up to 12 columns. The thing that makes Bootstrap so popular – in addition to the obvious benefit of having hundreds of predefined classes, so we don't have to worry about spacing and struggle with the composition of our divs – is its documentation. It's impossible to get lost in it. In terms of topics, it covers styling support and its variants for all elements.
Drupal and Bootstrap - best friends
The Drupal community didn't pass by indifferently such a widely used tool and created two themes that allow integrating the Bootstrap library with Drupal.
Bootstrap theme
The basic theme that allows you to use the power of Bootstrap in Drupal can be downloaded from the Drupal.org page. It's worth mentioning, however, that it currently supports the library version 3, but is compatible with all Drupal versions from 7 and up.
Installing the theme can be done using the command line in composer:
require 'drupal/bootstrap:^3.23'
or the admin panel under the path /admin/theme/install.
The next step is enabling the theme in the Appearance section of the admin panel or using the drush command.
theme:enable bootstrap
(if we just want to enable the theme)
config-set system.theme default bootstrap
(if we want to enable the theme and set it as default)
This ready-made theme has many options for global configuration of individual components that make up our page – both static (forms, tables, containers) and dynamic (modal windows and pop-ups). You just need to go deeper into the settings under /admin/appearance/settings/bootstrap. We can already notice a significant difference in the appearance of our page.
Below you'll find the comparison of my test homepage. If you use the Bartik theme, you'll get the impression that suddenly the page components are mixed up and the whole thing looks "broken", but don't worry. In most cases you just need to slightly adjust the styling of the existing elements. Go to Structure -> Block layout and assign the correct regions to the blocks. Here I present the look of the Bartik theme after it's been adjusted accordingly.
Barrio theme
The process of installing and enabling the Barrio theme is the same as before. The main difference between Barrio and Bootstrap is the version of the library they use. For Barrio it's Bootstrap 4 or even 5 (for those who'd like to test version 5.0.2 of Bootstrap). The command to download Barrio via Composer looks like this:
require drupal/bootstrap_barrio
What we get in both cases are more ready-made templates that require further configuration and styling according to our needs, rather than a full, styled solution. They should be treated as the base themes which we'll inherit from in our sub-theme. This is also important in terms of future updates.
Creating own theme
Creating our own theme, which'll be based on the Bootstrap library version 3, 4 or 5, can be carried out in two ways:
- by using the starter kit available for both themes – under themes/Bootstrap/starterkits and themes/bootstrap_barrio/subtheme (the fastest and easiest option) respectively.
- using the starter kit available with both themes, but without using CDN (Content Delivery Network) (advanced option, requires a CSS preprocessor, e.g. SASS, to compile styles, and the Bootstrap library must be downloaded locally).
The first option only requires us to copy a ready set of files to a new folder in the themes path and rename the files from THEMENAME or bootstrap_barrio_subtheme to the machine name of our theme. You should also check the .theme, info.yml, schema.yml, color/color.inc and js/global.js files and make similar changes within them as well. Thanks to CDN, the Bootstrap library doesn't have to be downloaded locally.
From now on, we can start working on the appearance of our page, define the typography or colour scheme. In the theme settings, you'll find many options to modify the original configuration without having to modify the css or sass files. However, in most cases it turns out to be not enough and it's necessary to overwrite files and create templates in the .twig format.
Droopler – a high-end Bootstrap template
As a free Drupal distribution, Droopler was created with the idea of fast and comprehensive website creation in mind. Therefore, it contains a set of ready-made components and functionalities that most pages use and – thanks to its modular structure – has a highly configurable SCSS preprocessor. To perform the rest of our activities, you can install Droopler in the way described on the linked page.
Bootstrap is an integral part of Droopler. The Droopler theme uses Barrio – but unlike Barrio it provides a ready-made theme with styles, not just a template. In the scss folder, we can find ready-made style files for all components (mainly the available paragraph types, forms, etc.) and page structure elements (headers, footer, etc.).
Droopler subtheme – how to use it?
The Droopler theme also has a starter kit for creating your own sub-theme named STARTERKIT_CSS and STARTERKIT_SCSS, where we can easily modify the predefined variables. Let's check what it looks like when you want to use SCSS:
The style.css file combines the entire SCSS code from the main droopler_theme and our theme (files located in scss/config). Print.scss also combines the entire SCSS code for printing both themes. In the libraries subfolder, we can put our additional SCSS files, which we then have to add via @import in the style.scss file. When adding them, it's worth keeping the division into components and layout – as in the base theme.
You can make any changes to the settings of the Bootstrap library itself or the droopler_bootstrap base theme in the configuration files:
- _base_theme_overrides.scss
- _bootstrap_overrides.scss.
In the case of both files, we have at our disposal a quick guide covering the available variable modification options in the form of an extensive comment. All we need to do is uncomment the selected variable and substitute it with our value. The complete list of variables used in Bootstrap that we can overwrite can be found in the library's _variables.scss file. As it's downloaded automatically by defining the repository in the droopler_theme theme's package.json file, it can be found in the node_modules/bootstrap folder.
Suppose we want to change the colour of the submenu border that appears under the $dropdown-border-color variable in Bootstrap. In the base_theme_overrides file, we define a new colour, for example $color-example-1. Then, in the bootstrap_overrides file, we uncomment line 34, where the value for the border colour is defined. We substitute it with our newly created variable there.
You must run the compiler for the changes to become visible. In the case of Droopler, the developers also took care of it. There is a ready-made gulpfile.js file in the theme package. We just need to run the gulp watch command in the theme's directory (both droopler_theme and droopler_subtheme), so that any changes we make to scss, js or other source files are included and compiled automatically. The effect? Let's find out!
Our border is now pink. We can do the same for all variables.
Summary
Bootstrap is a powerful tool connecting graphic designers and developers. On the one hand, it allows designers to familiarize themselves with the website's architecture and the specialized terminology (e.g. a 2 column-wide sidebar instead of a narrow window that is glued to the edge of the page), on the other – it saves time of the developers who only need to use the correct class to transform a regular link into a button.
Integrating Drupal with Bootstrap may seem relatively complicated, but remember that the available Bootstrap and Barrio themes are only templates, and in the end we'll still have to assign appropriate classes for all types of links we use. In Droopler, this part is already taken care of – we only need to change the block layout or modify the existing Twig templates. We can create and implement a new colour scheme in a few moments by editing a single file – the effect is guaranteed.
