Upgrade Bootstap 4 to Bootstrap 5 - html

Is it a good idea to upgrade big project written with bootstrap 4 to 5 version? Or does it require global changes in every file?
I have just updated my project but almost everything stopped to work:
Dropdowns
Accordeons
and so on
So the question is: Is it a common problem and everyone has the same issues? Or did I do something wrong?
And if a lot of files written with bootstrap 4 - should I change almost each of them?

A key update includes Bootstrap no longer depends on jQuery but will rely on vanilla JavaScript moving forward, with dropped support for Internet Explorer 10 and 11. Bootstrap is also sporting a brand new logo to give the old B in a rounded square a small upgrade.
Before you take a step and migrate from Bootstrap 4 to Bootstrap 5, please remember that Bootstrap 5 is in alpha version at the time of this writing so some changes from the code and updates are anticipated until the release of the first beta version. It’s recommended to always check the open issues and pull requests on their official GitHub repository for open questions and feedback.

Related

getbootstrap.com vs bootstrapdocs.com: are these supposed to be the same things?

I've was thinking on migrating the Bootstrap versions on my site and was looking into my old cdn referrals.
Currently, my site is using Bootstrap 3, linking to maxcdn.bootstrap.com courtesy of bootstrapdocs.com
getbootstrap.com seems to have the latest versions. But the legacy CDNs listed on the site does not even contain the CDNs offered on bootstrapdocs.com(getboostrap.com is missing the CDNs for bootstrap-theme.min.css for the version 3s), on top of using stackcdn(as opposed to bootstrapdocs.com's maxcdn)
bootstrap.com also only seems to offer up to version 3.3.6 while there exist a bootstrap 4 and 5 is currently in the alpha stages.
Why are there 2 sites for the same thing?

Old web page with Bootstrap 3.3.4

Im working on my old web page that has the old version of Bootstrap 3.3.4.
Web page was created 2-3 years ago. I changed some minor things, content etc. and page worked perfectly fine 1 week ago. Today I again ran web page through XAMPP and nothing was as It should be. Its like there is no bootstrap on the page at all (I used CDN). There are no grids, content is not positioned right but overall styling is still the same. Im a beginner at web development, but by the looks of the errors, I speculate that Bootstrap 3.3.4 was removed. Is this the case? What should I do? I would prefere to use the old Bootstrap as It worked perfectly 1 week ago. Is that possible or how to upgrade?
Do I just change CDN with new Bootstrap and go through whole page and change all classes or is there any easy way?
this version is up and running (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css) you could try to set https:// to your location.

Upgrade from Bootstrap 3.1.0 to 3.3.7

I am thinking about upgrading the bootstrap files for my site. Is there any major changes in classes that I need to be aware of or is going to be mostly just a plug and play situation? The site has about 200 pages and I'm hoping that it is just a matter of updating the files.
You can't face any major issue by replacing old files with new bootstrap files. Feel Free to Replace Old version with newer version. In 3.* series, bootstrap just fixed the bugs and makes very small changes in the bootstrap 3. So don't worry about this.

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

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?
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
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.
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:-
Download preferred bootstrap 3 version from https://blog.getbootstrap.com/archive
Put it in custom css folder (or anywhere else) in your project.
Add its link in your header
(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.
Put all your contents which require bootstrap 3 inside a div tag with class="b3"
Done.

mootools and firefox 4 problem

I was working on a site some months ago and I used mootools menumatic from one of the resources sites from the internet.Firefox 4 was still beta at that time and I didnt tested my menu in it and currently i tested in firefox 4 and amazingly the script didnt work.where might be the problem.Thanks in advance.enter link description here
you use mootools 1.2.0 - just so we are clear on a few things here, and I am repeating myself but there you go...
mootools 1.2.0 is now 3 years old - http://ajaxian.com/archives/mootools-12-released - june 13th 2008. at the time of release, firefox 4 was not even a design concept.
mootools 1.2 relied on feature detection - read the previous thread linked above - and on the now deprecated getBoxObjectFor to determine if you were in a gecko-based browser like FireFox. Running this small test in FF4 on your site:
(via the firebug console):
JSON.encode(Browser.Engine);
"{"name":"unknown","version":"","unknown":true}"
Bottom line is, the menu works but it creates a javascript exception when trying to use specific style setters/getters that will fail due to the framework not understanding the browser version. This is likely NOT going to be the only error but you will need to write some extensive tests to catch all problems as many may result in different/undesired functionality rather than outright exceptions.
In short, the answer you may not want to hear: upgrade your mootools to AT LEAST 1.2.5.1 or ideally, 1.3.2 - you may need to use the compatibility mode version so your old plugins continue to work.
Other breaking changes: Function.bind used to take args of bindObj, [args] and is now natively defined as bindObj, arg1,... argn
And finally, you may want to accept some answers, 50% is way too low