In one of our biggest projects, we were using Bootstrap 3.4 for a long time. Finally, we decided to move on and upgrade it to the latest version – 4.5. This post summarizes how we did it and where we struggled the most.
As a guide we have used the official Bootstrap migration document, but also those unofficial ones:
- upgrade-bootstrap.bootply.com/
- designmodo.com/migrate-bootstrap-4/
- medium.com/@lukaszholeczek/migration-from-bootstrap-3-to-bootstrap-4-4ec63a1dd8b1
Our first step was to replace the old CSS classes with the new ones. For many cases, it was a simple “find and replace”. The part that gave us a lot of work was the HTML forms – because the new Bootstrap uses a slightly different HTML layout for them.
Next, we upgraded React Bootstrap and applied all the needed changed to compile our JavaScript code. Again, this forced us to changed a lot of code related to HTML forms.
Another challenge we encountered was how to update the icons. The old Bootstrap uses Glyphicons, which were are no longer supported. As a replacement, we decided to use the new icons for Bootstrap. The problem was that the old ones were used as a font, so you could easily operate with them just by specifying its name (plus you could easily change its size or color). The new ones use SVG tags. To be able to use them in our React code we incorporated svgr/webpack loader into our webpack pipeline (for building the JavaScript and CSS code). This way we can ask for a specific icon in a JavaScript code and use it without copying and pasting SVG tag from the website. This way if the icons are updated, we will get it for free (after updating NPM package). Also changing color or size is easy now.
In parallel with the updating the Bootstrap we decided to update all our other NPM packages so they are compatible with the version 4.5. As you can expected some additional work was needed here to tweak the JavaScript code.
At this stage, our application worked again but still, we had smaller and bigger display issues everywhere. First, we needed to identify them – therefore we did heavy manual testing of our application. When most of the problems were found – we could fix them in a relatively short amount of time. I will only mention about one change in Bootstrap 4.5 that caused a lot of small display issues in our application. In the old Bootstrap a div with a ‘row’ class could contain any other div and such div would take the whole space in it. In version 4.5 to have exact same behavior you need to add another div with the ‘col-*-12’ class. Small thing but many places in our application looked bad because of that.
Overall, the whole migration took us about 2 weeks and went smoother than we initially expected. If we had this knowledge earlier, we would probably do migration sooner.
