top of page

Upgrading from Bootstrap 3 to 5

There is always a bountiful of UI and CSS libraries to choose from. I often fallback to Bootstrap with a combination of UI libraries in-order to find the right blend for any good app development.

One library alone is usually not enough, especially if you want an app with enough feats to keep your fanbase engaged with your online offering.

Recently, I set up, and my build strategy might be different from others, even unique. But I prefer to prototype everything before considering any maturity of the application code.

For me prototyping is design in the code, vs. flat design to code, rather its living code that becomes alive as you mature it further. Not to say that UX design doesn't play its part, but I think the steps are incorrect.

  1. Prototyping (actual code)

  2. UX design

  3. Maturity

In the traditional setting this order will appear wrong, as stakeholders are primarily interested in visual co-ordination. Less in the engineering department.

And so I began with a very rough template born out of Bootstrap 3. Instead of React I used the Bootstrap 3 togglable tabs functionality.

But I realised there were things I wanted to use in Bootstrap 5 that was absent in the earlier version and so it was time for an upgrade.

The best way to upgrade is to simply update the CDN to import "bootstrap...min.css".

As soon as you do this, expect breaking changes:

  1. Grid

  2. Visible/hidden elements via break-points

  3. Font style etc..

From here, you can go through batch changes, e.g. start with grid and update each component until everything is fixed.

Took me approx 25 mins to change everything over.

9 views0 comments

Recent Posts

See All


bottom of page