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:
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.
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.