Best way to implement different bootstrap versions on the same page?

Question

In using asp.net I have a scenario where the master page is implementing version 2.2 of BootStrap. But there is some content I'd like to use BootStrap 3.3 for. If I try and upgrade or implement 3.3 over 2.2 in any ways, it breaks some of my code. Any ideas for how to "selectively upgrade" HTML/BootStrap to say, everything that's inside a "Div" tag?

Answer 1

Depends on how hacky you want to get. If it's just one feature, just copy the part of the .css from bootstrap 3.3 you want in its own css file and import this css file after the 2.2 version is loaded either in your build script or after your 2.2 version in your tag.

If you have a more specific question about which feature (if you're including js files as well) then we'll have to dig deeper.

Warning: You have to be careful with what you're overwriting from the 2.2 as it can break other css parts. And as @DavidG pointed out, I would avoid doing this entirely.

Answer 2

You can do'it realy easy by isolating Bootstrap with LESS, there is a good tuto to do this by "Chris Youderian". https://formden.com/blog/isolate-bootstrap

Answer 3

I needed to use use both bootstrap 3 and 4 on my project as a plugin which was written with bootstrap 3 looked terrible in bootstrap 4.

Tried to follow advice in the link shared in Hicham's answer. Couldn't get it to work. But following the cue, did some stuff manually and it worked. It took me 2hrs to finish step 4 though.

Steps:-

1. Download preferred bootstrap 3 version from https://blog.getbootstrap.com/archive
2. Put it in custom css folder (or anywhere else) in your project.
3. Add its link in your header
4. (CAREFUL with this step) Prepend '.b3 ' without quotes to every selector in the downloaded bootstrap version using ctrl-H command. This will take a long time considering mistaken conversions. (e.g - Conversion of "ol" selector to ".b3 ol" results in conversion of the word "control" to "contr.b3 ol" which needs to be reversed.
5. Put all your contents which require bootstrap 3 inside a div tag with class="b3"
6. Done.