Problem/Motivation
For now, the Drupal Bootstrap theme for most users simply doesn't work right after installation, breaking the first-time user experience!
Why? Because we do not set the bootstrap_source value in the default setting at all!
As result, the Drupal front page looks like this after the theme installation:

If the user has not yet given up at this step and switched to another theme, they will try to go to the theme settings and somehow fix this. They will see the "Load library" with the options "None", "Local", and a lot of strange options like "Bootswatch *", but they want to just use the bare Bootstrap theme!
They will try to choose "Local" and this will not work too! Because the theme expects that the user already pre-downloaded the bootstrap library and placed it into the [DRUPAL_ROOT]/libraries/bootstrap directory.
But in most cases, the Bootstrap library in this location is absent, which leads to displaying the Drupal frontpage UI completely unstyled again! And configuring Composer to download the Bootstrap library and place it there - is a quite complicated process.
The next step - they will try to choose some random theme from "Bootswatch *", but will see not the default bootstrap, but with some strange theme.
So, the question will remain open - how to configure the default Bootstrap style?
And the answer is - No way!
Steps to reproduce
1. Put yourself in the place of a regular Drupal Site builder.
2. Install the "Bootstrap" theme, expecting that everything will work out of the box.
3. Open the front page, and see that the site design is broken!
Proposed resolution
The solution for the described first-time user experience problem is very simple!
Let's just use by default the Bootstrap default CSS style from the official CDN, recommended by Bootstrap: https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links - just put into bootstrap.libraries.yml this:
bootstrap_cdn:
js:
//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js: { type: external, minified: true }
css:
component:
//cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css: { type: external, minified: true }
And set this option by default in the config/install/bootstrap.settings.yml file:
bootstrap_source: 'bootstrap/bootstrap_cdn'
And that's it!
I prepared an MR with this simple fix, please review it and give feedback.
Remaining tasks
User interface changes
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | bootstrap-use_cdn_by_default-3511145-5.patch | 2.11 KB | murz |
| Drupal-Bootstrap-theme-after-installation.png | 62.94 KB | murz |
Issue fork bootstrap-3511145
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
murzAttach a static patch file with the fix to make it possible to use in composer in a safe way until #3204538: GitLab Merge Requests Unable to Generate Incremental Patch Files is resolved.
Comment #4
murzPlease review the attached patch or MR, or share you thoughts about the described issue.
Comment #5
murzAdded a CDN option to the theme settings dropdown, to be able to choose it using UI, not only set by default.
Attach a static patch file with the fix to make it possible to use in composer in a safe way until #3204538: GitLab Merge Requests Unable to Generate Incremental Patch Files is resolved.
Comment #6
joyakas commentedTested the initial theme setup. Thank you, @murz, for the clean configuration.
Comment #7
jwilson3Came here befuddled as to why "CDN" is not even an option on the dropdown, much less why its not the "fallback" option when nothing else is selected. Thanks for this addition.
I suggest also adding the value to the bundled subthemes' info.yml as well.