Upgrade a Bootstrap5 subtheme

Last updated on
16 April 2026

When a new version of Bootstrap5 is released, the structure can change in template files, and other files.

The most efficient method is to check the folders and files against the base theme for changes. For example, if you've overridden any templates, check for variables that weren't in the old, but are in the new version.

Here is one method:

  1. Create a fresh, separate subtheme with the new version of Bootstrap5
  2. Copy over your SCSS-files, changes to .libraries.yml, .theme, etc. and recompile
  3. Compare with your present sub-theme, and see if anything has changed, for example with git diff, which can compare both folders and versions.
    Sub-theme
    Compare your old and new subtheme with this, omit --name-status to see the changes:
    $ git diff --name-status d10/mytheme d11/mytheme/
    M       d10/mytheme/README.md
    M       d10/mytheme/mytheme.info.yml
    M       d10/mytheme/config/install/mytheme.settings.yml
    M       d10/mytheme/css/ck5style.css
    M       d10/mytheme/css/ck5style.css.map
    M       d10/mytheme/css/style-52.css
    M       d10/mytheme/css/style-52.css.map
    M       d10/mytheme/css/style.css
    M       d10/mytheme/css/style.css.map
    M       d10/mytheme/scss/_variables_bootstrap.scss
    M       d10/mytheme/scss/ck5style.scss
    M       d10/mytheme/scss/style.scss

    Bootstrap5 theme template files
    Similarly, check which template files have been changed or removed, and adjust if you have copied them to use in your sub-theme. Git is great for this (D=deleted, M=Modified, A=Added):

    $ git clone --branch 3.0.x https://git.drupalcode.org/project/bootstrap5
    $ cd bootstrap5
    $ git checkout 4.0.x
    $ git diff --name-status 3.0.x 4.0.x -- templates
    D       templates/block/block--system-menu-block.html.twig
    M       templates/content/media.html.twig
    M       templates/form/details.html.twig
    M       templates/form/fieldset.html.twig
    M       templates/form/form-element.html.twig
    M       templates/form/input.html.twig
    D       templates/form/select.html.twig
    M       templates/layout/html.html.twig
    A       templates/media-library/container--media-library-widget-selection.html.twig
    A       templates/media-library/links--media-library-menu.html.twig
    A       templates/media-library/media--media-library.html.twig
    A       templates/media-library/media-library-item.html.twig
    A       templates/media-library/views-view-unformatted--media-library.html.twig
    M       templates/navigation/menu-local-tasks.html.twig
    M       templates/views/views-mini-pager.html.twig

    Now compare the different versions and adjust. For example, the select.html.twig template file was deleted in #3330099: select should get "form-select" class instead of "form-control".

A more crude method is to simply try updating the base theme on a local copy, and see if things break or not. But a systematic check is the safest method.

Help improve this page

Page status: No known problems

You can: