Multiple versions of bootstrap

[vivek-kandhvar]

Hi, we have been planning to use tailor for combining multiple of our apps into one.
We have been facing some issues with CSS. Though we fixed app specific css using fragment name as name-spacing, we are unable to do so for external css like bootstrap. We have two react apps, using two different version of bootstrap. Once both the apps are loaded, we are seeing css clash happening for bootstrap components like select, datetimepicker etc. Any thoughts on this?

[stevoPerisic]

You have to remember that this is still front-end code once it is all processed by Parse. You wouldn't include two version of Bootstrap in your regular application correct?
You have to decide on one version and stick to it.

[vivek-kandhvar]

True that. I get what you are saying. But the case is a little different here.
Each app is built by a different team, and one app uses bootstrap 3.x, and the other uses 4.x.
Upgrading the other is not feasible at this time. So I was wondering if there is any way to handle this scenario. Appreciate your help.

[stevoPerisic]

Here's an idea, perhaps you can use tools like gulp and webpack to prefix each fragment's static resource code. For example you can use the SASS Bootstrap and run it through your own build script which can add prefixes for your fragments. Hope this can get you started...

[vivek-kandhvar]

I think you are talking about using namespace for the css, which I have already done. With that, css issues are taken care to an extent. But the js code from both versions still spill over and are causing issues. Even using common fragment didn't solve that.

[manikanta443]

@vivek-kandhvar, did you find any solution for the above problem. Currently I'm facing the similar problem. Thanks in advance.