Hybris update bootstrap version from 3 to 4

Hybris OOTB uses bootstrap 3.3, however I want to benefit from the new features that bootstrap 4 offers such as spacing and margin. Is there any way to "update" the bootstrap 3 to 4?

Solution

The OOTB Hybris storefront template is just that, a template. When you upgrade your SAP Commerce (Hybris) to a newer version, you always need to manually perform updates to the storefront project.

Nothing is stopping you from just throwing out bootstrap 3.3 in the _ui-src/responsive/lib folder and replacing it with bootstrap 4.0

When you change this folder, don't forget to update the buildcallbacks.xml from your storefront project. There is an ant target that moves the bootstrap folder and renames it. You need to provide the correct folder name here

        <copy todir="${ext.yacceleratorstorefront.path}/web/webroot/_ui/responsive/common/bootstrap">
            <fileset dir="${ext.yacceleratorstorefront.path}/web/webroot/WEB-INF/_ui-src/responsive/lib/bootstrap-3.3.7" includes="**" />
        </copy>

After changing this, it's possible that some of the out of the box styling is no longer okay. You will need to fix that. But that depends a lot on what bootstrap version you go to, and what has been customized

Replace the old bootstrap 3.3 with the version you want to use in web/webroot/WEB_INF/_ui-src/responsive/lib
Change the build callback in the storefront project to use the new folder name
run ant clean all to move the new bootstrap lib to the correct location
Validate that it still looks visually okay and resolve possible problems manually