Upgrade the Back Office to Bootstrap 5

To migrate Bootstrap in the Back Office to version 5, take the following steps:

1. Update the required modules:

  composer update spryker/configurable-bundle-gui:^1.4.1 spryker/customer-group:^2.8.1 spryker/customer-user-connector-gui:^1.5.1 spryker/file-manager-gui:^2.8.1 spryker/gui:^3.59.0 spryker/navigation-gui:^2.10.1 spryker/product-category:^4.28.2 spryker/product-category-filter-gui:^2.5.1 spryker/product-label-gui:^3.6.1 spryker/product-list-gui:^2.6.2 spryker/product-option:^8.22.1 spryker/product-relation-gui:^1.6.1 spryker/product-set-gui:^2.12.1 spryker/security-gui:^1.9.1 spryker/warehouse-user-gui

2. Update the oryx-for-zed dependency:

  npm install @spryker/oryx-for-zed@~3.5.0 --save-dev

3. Override the general layout from Gui/Presentation/Layout/layout.twig on the project level.

4. Enable Bootstrap 5 assets by setting the isBootstrapLatest twig variable:

layout.twig

  {% set isBootstrapLatest = false %}

5. Update the head_css block:

layout.twig

{% block head_css %}
    {% if isBootstrapLatest %}
        <link rel="stylesheet" href="{{ assetsPath('css/spryker-zed-gui-commons-bootstrap-compatibility.css') }}">
    {% else %}
        <link rel="stylesheet" href="{{ assetsPath('css/spryker-zed-gui-commons.css') }}">
    {% endif %}
    ...
{% endblock %}

6. Update the footer_js block:

layout.twig

{% block footer_js %}
    {% if isBootstrapLatest %}
        <script src="{{ assetsPath('js/spryker-zed-gui-commons-bootstrap-compatibility.js') }}"></script>
    {% else %}
        <script src="{{ assetsPath('js/spryker-zed-gui-commons.js') }}"></script>
    {% endif %}
    ...
{% endblock %}

7. Repeat steps 4-6 for the login layout in the separate module: SecurityGui/Presentation/Layout/layout.twig.

8. Clear cache:

  docker/sdk console c:e

9. Run twig cache warmer:

  docker/sdk console t:c:w

10. Build JS and CSS assets compatible with Bootstrap 5. To manage the version of bootstrap, set the BOOTSTRAP_VERSION variable:

docker/sdk cli BOOTSTRAP_VERSION=5 npm run zed