Configuring the design theme for Drupal.
Notice.
This article was written when I was testing a local environment before publishing Drupal on Lightsail. After that, when I selected the Tokyo region blueprint on Lightsail, the Bitnami Drupal instance defaulted to version 10.3.3. After installing and updating, this website launched on Drupal 10.3.5. *As of September 30, 2024.
As the article describes, my local Mac environment was set up with Drupal 11.0.4. I had intended to run Drupal 11.0.4 on AWS, but the Drupal instance available through the Lightsail blueprint did not support 11.0.4, so the site launched on Drupal 10.3.5 instead. I apologize for the confusion this creates with the article.
Amazon Lightsail is covered in a separate article.
Selecting a Theme.
When you install Drupal, a theme called Olivero is installed by default.
The Drupal Core I installed is 11.0.4, so Olivero 11.0.4 is set as the default theme. Olivero is a well-made theme, with Drupal's basic front-end features (page creation, blogging, categorization, and so on) ready to go, and a responsive design (optimized for both desktop and mobile).
You can build a solid website with Olivero as-is, but I want to make use of Drupal's strengths in information organization and usability, so I'll install the Bootstrap5 theme.
Since I installed Drupal 11.0.4, the number of themes with confirmed compatibility was still limited. Bootstrap5, however, was already compatible with Drupal 11.x as of August 2024.
I had originally been using CivicTheme — a theme used by Australian government agencies and educational institutions — but it had not yet been updated for Drupal 11.x (though support was planned). When I installed Drupal 11.x in the test environment and tried to install CivicTheme, I got a dependency error and couldn't proceed. That's why I'm using Bootstrap5 this time.
1. Bootstrap5.
Bootstrap5 is a Drupal theme built on Bootstrap, the front-end toolkit originally developed by Twitter. Using pre-built CSS and JavaScript libraries, you can put together page designs without writing code from scratch.
The current latest version of Bootstrap is the 5.xx series. The Bootstrap5 theme I'm introducing here — the one this website uses — lets you build a website using the Bootstrap 5.xx library.
My own design sense isn't particularly strong, but using the Bootstrap5 library is enough to produce a visually clean, readable website without much effort. Bootstrap was developed from the start with a mobile-first approach, which gives it better mobile readability than many other front-end toolkits.
It's a very minimal theme. Out of the box, there are no preconfigured Views, Taxonomy, or other site structure settings — you build the site structure yourself, and layer Bootstrap library classes onto HTML tags to put together the design.
The theme's approach is to let Drupal handle the backend work — page organization, what to display, anything touching the database — while Bootstrap's library handles the visual design. Drupal covers the backend and the base HTML; Bootstrap fills in the front-end design. It's a clean, simple split.
One benefit of that simplicity is that the modules installed by default are minimal — just Drupal Core's defaults plus the Bootstrap toolkit, with nothing extra. You add modules as you need them, which keeps module management straightforward.
Bootstrap has a large user base and is a pleasure to work with, but compared to newer toolkits like Tailwind, it can feel a step behind in terms of design freshness. That's less about the quality of the design and more about familiarity — you see Bootstrap-based layouts everywhere precisely because it dominates the market.
Bootstrap official website The official Bootstrap website.
Bootstrap5 Drupal Theme The Bootstrap5 page on the Drupal official site — the theme I installed and use on this website.
The current version is 4.0.3, running without issues on Drupal 11.0.4.
Bootstrap5 4.0.3 Release notes
On to the installation.
2. Installing the Bootstrap5 Theme.
Bootstrap5 is installed via Composer.
Installing Bootstrap5
% composer require 'drupal/bootstrap5:^4.0'
|
-----Installation output-----
./composer.json has been updated
Running composer update drupal/bootstrap5
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
- Locking drupal/bootstrap5 (4.0.3)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Downloading drupal/bootstrap5 (4.0.3)
- Installing drupal/bootstrap5 (4.0.3): Extracting archive
Generating autoload files
43 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
No security vulnerability advisories found.
-----End-----
|
// Installation complete
%The installation proceeds without any issues.
Once the installation is complete,
In the Drupal admin panel:
Appearance > Uninstalled themes
Bootstrap5 4.0.3 will appear there. Select > .
This installs Bootstrap5 4.0.3 and sets it as the default theme.
3. Configuring a Sub-theme.
Bootstrap5 comes with a built-in sub-theme creation feature. I'll create a sub-theme and set it as the default.
In the Drupal admin panel:
Appearance > Bootstrap5 >
In the accordion menu at the bottom of the settings page,
find the SubTheme section. Select it, fill in the three fields below, and click to generate the sub-theme.
Create subtheme.
- Subtheme location > themes/custom
- Subtheme name > B5 subtheme
- Subtheme machine name > b5subtheme
Clicking places the sub-theme in the uninstalled section.
Select the sub-theme and choose to run the site on the sub-theme.
4. Initial Bootstrap5 Theme Settings.
With the sub-theme configured, the next step is the initial Bootstrap5 settings.
A diagram makes this easier to follow, so I'll cover it in a separate article.
With Bootstrap5 installed and the sub-theme configured, the next article covers the basic Bootstrap5 settings.