Bootstrap 5 themes overview
These notes are mainly about base themes built on top of version 5 of Twitter Bootstrap. There is a brief summary of each of them, and a discussion of the releative merits of the most interesting ones, with links to separate notes about installing and using these.
Table of contents
Drupal extensions discussed in this chapter: Barrio, Barrio SASS SK, Bootbase, Bootstrap5, Droopler, DXPR Theme, Freelancer Zymphonies, Power Portfolio, Radix, YG Medical.
Introduction
These notes are currently a work in progress. I am currently looking for a Bootstrap 5 theme for Drupal 10. The plan is to identify the best one of those available, and to make use of the selected one as base theme for most of my Drupal websites. My crieria:
- Easy to create and customise a subtheme.
- Local SCSS (i.e. not loading Boostrap from a CDN).
- CLI based developmend environment, (i.e. configuration through the GUI not wanted).
I have not concluded yet, and your criteria may be different from mine. So do not look at this page to find a recommendation for your website.
About the Bootstrap framework
The Bootstrap framework was developed in 2011 by a small team lead by Twitter developers Mark Otto and Jacob Thornton. It is a a powerful mobile first front-end framework for faster and easier web development.
The
Twitter Bootstrap framework is widely used for
mobile-first responsive web applications. There are good
reasons for that, as Christopher Gimmer explains
in Top 5 Reasons to use Bootstrap.
However, the Bootstrap framework is not
without its faults, and Ian Carrico argues that You Don't Need Bootstrap.
Read both sides of the argument and make up your own mind.
Several adaptions for Drupal of the Bootstrap framework for Drupal exist and can be downloaded from Drupal.org. Some are base themes that is designed to be used as base themes for your own custom subtheme. Others are full themes that just incorporate elements from Twitter Bootstrap in their design.
For colours and typography, it tries to make use of Google's Material design system.
The biggest difference between Bootstrap 3 and Bootstrap 5 is that Bootstrap 5 uses flexbox, instead of floats, to handle the layout.
Development environment
The development environment required for most Bootstrap 5 themes leans heavily on the Node.js ecosystem, in poarticulat the following tools:
- npm
- node
- browser-sync
- gulp
- sass
To work with the theme, you need to install sass. Installation is described in the section about installing CSS pre-processors. See links to my notes about installing these for specific operating systems below:
- RedHat:
- TBA
- Ubuntu:
See also GBS: Customize Sass
As noted in the
installation notes,
I am unable to get browser-sync to work on a web server, (i.e. a
headless environment). If that is the case, you may need to modify the
sample gulpfile.js that some of these themes comes with
to not use BrowserSync. It does not seem to be essential
to the process of creating css.
For
an alternative approach to setting up a suitable development
environment, see Medium.com:
Setting up Gulp 4 for Bootstrap, SASS, and BrowserSync.
However, this does not explain how to use Browsersync in a headless environment.
Available Bootstrap 5 themes
I am currently aware of the following base themes that are still actively maintained that are based upon version 5 of Bootstrap (sorted decending by number of installs):
| Name | Ver. | Updated | D10 | Installs | Issues | Bugs | RBTC | Doc |
|---|---|---|---|---|---|---|---|---|
| Barrio | 5.5.16 | 2023-12-03 | ✓ | 38 160 | 40 | 4 | 1 | New |
| Bootstrap5 | 3.0.10 | 2023-09-15 | ✓ | 13 046 | 48 | 23 | 3 | New |
| Radix | 5.0.11 | 2023-08-17 | ✓ | 8 422 | 117 | 67 | 0 | Ext |
| Bootbase | 8.x-1.37 | 2023-11-27 | ✓ | 220 | 2 | 0 | 0 | Readme |
The version is the latest stable recommended release, and the updated date is the date of that release.
Short descriptions of those base themes:
- Barrio:
- Heavily depending on nodeJS. Default set up uses a CDN for Bootstrap, but there exists a companion project (Barrio SASS Starter Kit) to have the SCSS locally and scripting rebuilds with gulp. Offers an extensive GUI for configuring the theme settings, including the Bootstrap components, layout, colours and fonts. This GUI-based approach may not suit developers that prefer to use the CLI for configuration, working directly with SCSS files and twig templates. Used by the Varbase distribution.
- Bootstrap5
- A non-prescriptive Bootstrap 5 base theme with simple configuration. It can be used out of the box or as a subtheme for creating flexible web designs with minimal changes. It uses standard Bootstrap classes for “light” and “dark” theme colours, and you can flip between them using the GUI. Provides the SCSS necessary for local rebuilds of a custom subtheme with sass. Author also provides Bootstrap 5 tools.
- Radix:
- Not yet evaluated. Heavily depending on nodeJS. Issue queue with 117 open issues and 67 bugs usually indicates that the theme is not well maintained. However, it is used by eight distributions.
- Bootbase
- Not yet evaluated. Claims to be friendly to developers.
The table below links to relevant subthemes that I am aware of (sorted decending by number of installs).
| Name | Base | Ver. | Updated | D10 | Installs | Issues | Bugs | RBTC | Doc |
|---|---|---|---|---|---|---|---|---|---|
| DXPR Theme | Bootstrap5 | 5.2.0 | 2023-11-01 | ✓ | 2 426 | 17 | 11 | 0 | Ext |
| Barrio SASS SK | Barrio | 5.0.10 | 2023-09-26 | ✓ | 1 586 | 34 | 7 | 3 | New |
- DXPR Theme:
- Not yet evaluated.
- Barrio SASS SK
- Not yet evaluated.
The table below links to full themes and distros that is built on top of Bootstrap 4 or Bootstrap 5 that I am aware of (sorted decending by number of installs).
| Name | Ver. | Updated | D10 | Installs | Issues | Bugs | RBTC | Doc |
|---|---|---|---|---|---|---|---|---|
| Freelancer Zymphonies (theme) | 2.0.2 | 2020-11-25 | ✗ | 605 | 15 | 11 | 4 | - |
| Droopler (distro) | 3.1.0 | 2022-10-11 | ✗ | 236 | 26 | 12 | 0 | Ext |
| YG Medical (theme) | 2.0.0 | 2020-08-24 | ✗ | 60 | 13 | 8 | 1 | Ext |
| Power Portfolio (theme) | 9.0.2 | 2023-08-06 | ✓ | 55 | 21 | 20 | 0 | Readme |
Most interesting
The most interesting Bootstrap 5 themes are discussed below. However, some of them has been expanded into full chapters that are linked.
Barrio
The base theme with most installs and most decent documentation is Barrio.
There is a separate chapter about installation and configuration.
Bootstrap5
The base theme I find best suited for subtheming is the lean and clean Bootstrap5. It does not come with much documentation, but you can install the companion Bootstrap 5 tools to get a copy of the Boostrap 5 style guide.
There is a separate chapter about installation, configuration and subtheming.
Final word
Of those discussed above, the base theme I find best suited for subtheming is the lean and clean Bootstrap5.
Last update: 2023-12-03 [gh].