Set the design theme to be used with Drupal.
This article was written when I was testing Drupal on a local environment before publishing it on Lightsail. After that, I selected Bitnami's Drupal, which I installed in the Tokyo region using the Lightsail blueprint, and it was set to 10.3.3 by default. After installation, I updated it, so this website is published using Drupal 10.3.5. *As of 30th September 2024
As mentioned in the article, the Mac environment is built using Drupal 11.0.4. We had planned to run Drupal 11.0.4 on AWS, but the Drupal instance provided by the Lightsail blueprint is not compatible with Drupal 11.0.4, so please understand that the article is published using Drupal 10.3.5 and the content is difficult to understand.
I will write about Amazon Lightsail in a separate article.
When you install Drupal, the default theme is called Olivero.
The Drupal Core that we have installed this time is 11.0.4, so the theme called Olivero 11.0.4 is set as the default theme. Olivero is an excellent theme, and it comes with the basic Front End functions of Drupal (such as page creation, blogs, and categorisation), and the design is also responsive (optimised for site design according to the usage environment of PCs and mobile phones).
You can build an excellent website using Olivero as it is, but I want to use Drupal's excellent information organisation and usability, so I will install the Bootstrap5 theme.
This time, I installed Drupal 11.0.4, and while there are still not many themes that have been confirmed to work, Bootstrap5 is compatible with Drupal 11.x as of August 2024.
Originally, I was using a theme called CivicTheme, which is used by Australian government and educational institutions, but it was not yet compatible with Drupal 11.x (it is scheduled to be compatible), so when I installed Drupal 11.x in the test environment and installed CivicTheme, I got a message saying it could not be installed due to a dependency issue, so I could not install it, so I am using Bootstrap5 this time.
Bootstrap5 is a theme that makes it possible to use Bootstrap, a front-end toolkit developed by Twitter, in Drupal. You can build page designs without writing code from scratch, using the CSS and JavaScript libraries that are already prepared.
The latest version of Bootstrap is currently 5.xx. This theme uses the Bootstrap 5.xx library to build websites, and is the theme we are introducing here and using on this website.
I don't have a great sense of design myself, but by simply using the Bootstrap 5 library, you can easily create a website that looks good and is easy to read. Bootstrap was developed with the concept of mobile first from the outset, so it has better mobile visibility than other front-end toolkits.
It is a very simple theme, and by default it does not come with settings for site structure such as views or taxonomy, so you will need to build the site structure yourself, and then write the Bootstrap library into the HTML tags to assemble the site structure and design.
As for the theme's features, Drupal handles the parts involving the database, such as page organisation and display items, and the Bootstrap library is used for the display design. Drupal handles the backend and default HTML, and the Bootstrap module is used to flesh out the frontend design, creating a simple structure.
One of the advantages of this simple structure is that the default modules installed are only the Bootstrap toolkit, which is installed by default in DrupalCore, and no unnecessary modules are installed. You can select and install modules as needed, so it is also easy to manage modules.
Bootstrap is used by many people and is very easy to use, but in terms of design innovation, it is outdone by new front-end toolkits such as Tailwind. However, this is not due to the superiority of the design, but because it is used by many people and is often seen, it has become the standard that accounts for the majority of the market share.
Bootstrap web site Official Bootstrap website.
Bootstrap5 Drupal Theme This is the page published on the official Bootstrap5 Drupal website that I will install and use.
Currently, the version is 4.03 and it is working fine with Drupal 11.0.4 that I have installed.
Bootstrap5 4.0.3 Release Notes
Let's install it right away.
Bootstrap 5 is installed using Composer.
// Installing Bootstrap 5
|
|- % composer require 'drupal/bootstrap5:^4.0'
|
-----Installation message-----
./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 will proceed without any problems.
Once the installation is complete,
Drupal Admin console
Home > Administration > Appearance
Bootstrap 5 4.0.3 is available. > Select.
Bootstrap 5 4.0.3 is installed and becomes the default theme.
Bootstrap 5 has a sub-theme creation function as standard, so create a sub-theme and set it as the default.
Drupal Admin console
Home > Administration > Appearance > Appearance Settings > Bootstrap5 Select.
In the accordion menu at the bottom of the settings screen
There is a SubTheme section, so select that and set the following three items Press the button to create a sub-theme.
Create subtheme.
- Subtheme location > themes/custom
- Subtheme name > B5 subtheme
- Subtheme machine name > b5subtheme
To create a sub-theme in the uninstall section, click the button.
select a sub-theme、 ,the sub-theme will be used.
Now that the sub-themes have been set up, we will set up the initial settings for Bootstrap 5.
It is easier to understand if we draw a configuration diagram, so we will explain this in separate articles.
Bootstrap5.
Now that you have installed Bootstrap 5 and set up the sub-theme, you can move on to the next section to make the basic settings for Bootstrap 5.
