Migration from Bootstrap v4 to v5

Migration from Bootstrap v4 to v5, notes
Modestas Dromantas
Modestas Dromantas

All apps can be easily converted to use latest Bootstrap version (BS5).

All site scripts, toolbar and Orgunits chooser lookup are converted to be compatible with both versions. Workflow register and details page are already using BS5.

There is a af.bootstrap5 template created which has latest version and some compatibility CSS created by us, not to have to do too much of working with classes. Although there might be some edge cases not covered by migration CSS. There is also Omega365 colors file, which colors specific classes with our own colors and if we missed some, just give us head up and we do FIX.. :) At this stage we have left Jquery, as BS5 allows it, so you won't need to do anything about it. Some reading if some parts does not want to work as intended: https://getbootstrap.com/docs/5.2/migration/.

Here are some migration notes we made while doing changes:

  • Change to a new template and see how it looks
  • All BS data attributes needs changing from data-* to data-bs-*. Our mostly used: data-target, data-toggle, data-dismiss and popover options. Just check your modals, dropdowns, tabs and popover functionality.
  • When changing data-dismiss to data-bs-dismiss make sure there is no events associated with this element, cause they will stop working. Initially it's goal is to close modal and in this case it stops all events from bubbling further. If you still need some events attached, just don't use dismiss, but use your handler instead and use bs modal API to close it.
  • Class row children will get width of 100% on a new version, which brakes some of our layouts, in most cases we just did remove row class, as it was just used to have negative paddings.
  • Custom radios, checkboxes, input groups are described in migration CSS, but it would be better to revise code and use new syntax, some edge cases were found when migration CSS is not fixing everything.
  • All padding, margin, floating to left and right classes (pl-2, mr-2 and etc.) is defined in migration CSS but eventually should be changed to corresponding ps-2 and me-2 classes.

Good luck