Downgrade the predefined section, components and widget to bootstrap 3

[Jayagopal-web]

I want to downgrade the predefined sections, components, and widgets to Bootstrap 3.
Note: I’m not referring to downgrading the Vvveb editor itself, since it’s standalone — only the predefined sections, components, and widgets will be downgraded.

We have two separate CakePHP projects that use Bootstrap 3:

E-commerce site – for customers to place orders and view CMS pages.

E-commerce control panel – for clients to manage the content of the e-commerce site.

I’ve integrated the Vvveb editor into the control panel using an iframe to avoid conflicts between Bootstrap 5 (used by Vvveb) and Bootstrap 3 (used by our system). This setup works well for creating and saving CMS content to the database.

However, when the e-commerce site loads the content created in Vvveb, style conflicts occur and the site layout collapses, since Bootstrap 3 and 5 differ in structure and behavior (Bootstrap 3 uses jQuery while Bootstrap 5 uses vanilla JS).

Methods Tried

1. Iframe Method
   I used an iframe to load the Vvveb-generated content in the e-commerce site. It works fine for now, but in the future, we may need to include forms or other interactive elements, which could cause issues inside the iframe. I’m also concerned about the increased page load time, especially since many users access the site on mobile devices, making this approach less practical long-term.

2. Scoped Styles Method
   While saving the HTML, I wrapped the content inside a unique ID like:

<div id="vvveb-content"> body content </div>

Then I converted style.bundle.css to style.bundle.scss and scoped all Vvveb styles within:

#vvveb-content {
  // Vvveb styles
}

This approach prevents Bootstrap 3 styles from overriding Bootstrap 5 styles — only the elements inside #vvveb-content are styled with Bootstrap 5. However, I had to make several adjustments using !important rules. The downside is that it increases page load time since both Bootstrap 3 and Bootstrap 5 are loaded in the same project.

Note: As of now, I haven’t included the Bootstrap 5 JS in either the e-commerce site and the control panel — only the section content uses Bootstrap 5 styles.

3. Downgrade Method (Proposed)
   I’m considering downgrading all Vvveb sections, components, and widgets to Bootstrap 3.
   This way, I can remove style.bundle.css and Bootstrap 5 CSS, and instead import Bootstrap 3 (with jQuery in the future if needed).

This approach is time-consuming since I’ll need to rewrite the styles for both the Vvveb editor content and the e-commerce site. However, it significantly reduces the memory load on the e-commerce site, as Bootstrap 3 is already included — meaning I only need to import the new Vvveb styles created during the downgrade process.

My main concern is that this could cause compatibility issues in the future, since the Vvveb editor itself uses Bootstrap 5, while the content sections, components, and widgets would be based on Bootstrap 3.

Please let me know whether I should follow the second method (scoped styles) or the last method (downgrade to Bootstrap 3).
If you have any other recommended approaches to handle this more efficiently, your suggestions would be greatly appreciated.