Loading...

Migration Guide

Bootstrap 5 is not an update, it is a new project and everything is changed. Of course, everything has changed in bootScore 5 as well. It is not an update and cannot be updated via the theme-uploader, it is a new theme. If you would switch an existing site from bootScore to bootScore 5, a step-by-step migration is needed.

Bootstrap 5 and bootScore 5 are in an early stage and some things are better, some things are not as good as before, some things new and some things dropped. So first I have to ask myself a few questions whether migration is even an option for me.

Questions

1. Do I need Internet Explorer support?

This is the first and most important question I will ask my clients when they inquire about a new project. Bootstrap 5 no longer supports Internet Explorer, but in some areas with older or non-tech-savvy users, IE usage is still high (Doctors, Lawyers, Craftworkers etc.).

Check usage in Google analytics. If the site is visited more than 5% with Internet Explorer, use v4.bootscore.me.

2. Am I using a customized bootstrap.min.css?

If yes, am I able to customize Bootstrap by myself via Sass or can i overwrite it? There are no generators available for Bootstrap 5 yet.

3. Do i use Scrollspy?

Scrollspy is (still) not nearly as good compared to Bootstrap 4. Check the new documentation about it. If that is not enough or too complicated, you should wait until Scrollspy is completely fine again.

Migration

1. Backup your site and work on backup

Do not work on a live site. Yes, everybody knows it. But I would like to point out again that a migration is always a certain risk and should never take place on a live page.

2. Uninstall all bootScore plugins

All bootScore plugins must be uninstalled. Don’t worry, you won’t lose any data. Shortcodes and functions are the same, but the files are migrated to Bootstrap 5, name and folder has suffix 5.

That is the reason why the plugins cannot be updated, they have to be reinstalled. If you upload a new plugin beside to an existing one, functions are twice and you see the “white site of death”. Old plugins won’t work in bootScore 5.

2.1 Uninstall WooCommerce Ajaxified Cart

If you run a shop, you no longer need this plugin. An ajax shopping cart is already integrated in the theme.

3. Install bootScore 5

Download and install bootScore 5. Install it beside bootScore.

4. Install and activate a child-theme

Download and install one of the child-themes. Install it beside your existing child and activate it.

5. Install all new plugins again

Download, install and activate all plugins you used again. bS Dark Mode and bS Isotope became paid plugins now. If you have already an account in previous bootScore, you can download them in your dashboard for free. Your account and orders have been taken over here.

6. Customize

Copy all files you used in previous child-theme from bootScore 5 parent to your new child. Do changes step by step again by checking what you did before. It is not possible to copy them from your previous child, because files content changed.

If you used color variables for customizing, please note that variables changed from for example var(--dark) to var(--bs-dark).

7. Check content

Check if your content works well. If not, maybe Bootstrap 4 classes are used. Note that classes for grid, spacing, left and right changed.

8. Check Forms

Forms got a huge update in Bootstrap 5. form-row is removed and replaced by g-*. But form-row is used by WooCommerce form validation. So, bootScore now has its own script to validate WooCommerce forms.

File upload, select, switches, checks and radios are completely new. If you use the bS Contact Form 7 plugin, you will find the new HTML markup for a form on plugin site.

4 Comments on “Migration Guide”

  • Alan Vidoc

    says:

    bug: navbar item is not changing state to active for the current page

    • Basti

      says:

      Hello Alan,

      thank you for reporting. It seems that is bootstrap-nav-walker.php (currently a modified Bootstrap 4 one). So, we have to wait until version 5 of it is out.

      However, i did a quick workaround with jQuery in theme-header.js. It does NOT work for parent item if sub menu item is active.

      Download and install new version from your user dashboard.

    • Basti

      says:

      Edit: It has been fixed in the workaround. Parent items are now highlighted if child in dropdown is active. Download newest version from dashboerd.

Leave a Comment

Cookies help us deliver our services. By using our services, you agree to our use of cookies. More Information