This is a first step in my series on fixing a real-world legacy application. It focusses on updating Bootstrap, but the broader issue here is that you should update the components you are using.

The application was using Bootstrap 3. Updating to version 4 was fairly easy. I first uninstalled the NuGet packages bootstrap.less, Twitter.Bootstrap and respond.js. I chose to use the Bootstrap CDN so all I need to do was:

• remove the Bundle in  my BundleConfig.cs file
• change the loading of the bundle with the relevant html tags to load the Bootstrap files from the CDN

Because Bootstrap uses jQuery, I also chose to remove the jQuery NuGet packages, and use the CDN version.

Bootstrap 4 doesn’t include any icons, so I decided to use Font Awesome. Again, by using the CDN.

I then had to go over my views and convert some CSS classes. I used this Bootstrap 3 to 4 converter, but it wasn’t always accurate. Luckily, I didn’t have many views. In cases where you do have many views, I would recommend trying to move over gradually, i.e. loading Bootstrap 3 on some pages, and 4 on others.

This took quite some testing and finetuning of all my views, but I managed to do it in a couple of hours. While doing so, I included some tweaking and modernization of the layout.

After performing all these steps, everything worked well except my charts page. I was using Highcharts and still don’t know why it stopped working. I was thinking about updating Highcharts, but it seems it’s no longer free. I have no issues with this, but for the purpose of my little website, I decided to switch to the free Chart.js.