Bootstrap upgrade from v4.3 to v5 broke the whole application css

Question

I have an angular app which is on Angular 14 uses bootstrap with SCSS compiled to node-sass/SASS package. It also uses ng-bootstrap v11 and bootstrap v4.3.1 for css styles. I had to upgrade the angular version from v14 to 15 as part of the general upgrade. While doing so, I had to upgrade ng-bootstrap to v14 and its dependencies bootstrap to v5.2. I had to re-introduce some mixins/functions that were deprecated. After doing other related build issues, I was able to build the angular application successfully.

When I saw the application in browser, the whole css has been modified. The entire application looked like zoomed in browser. Font sized, styles were changed. There were other UI issues as well. The response feature of the bootstrap was behaving completely different.

From the bootstrap site, I was able to see documentation that it has broken changes. https://getbootstrap.com/docs/5.0/migration/

I want to know if there is a way to upgrade bootstrap v4.3.1 to v5.2 without breaking the whole scss/css.

Any help is appreciated.

Answer 1

The short answer is NO. You cannot automatically upgrade from Bootstrap v4 to v5.

Bootstrap does not provide migration tools like Angular does, for example.

Anyway, I see 3 different options to solve your problem:

1. Manually change and rewrite all styles from v4 to v5 based on the documentation you provided (the best option)
2. Consider not migrating to a new version of Angular
3. Remove ng-bootstrap from your project and install bootstrap v4 styles globally (this is not the best practice, it will most likely hurt and I'm pretty sure you will have to rewrite parts of the code)