🔮 Bootstrap 5 Upgrade Notes

[chrisblakley]

Bootstrap 5 is coming soon, so I want to log all the notes in one place for how Nebula will handle the upgrade.

Will need to update the Nebula Option that allows the admin to choose which version to load (and note browser support for version 5.

Figure out how to best use the "grid only" equivalent as well as combine the files locally like I do now. Also figure out how to simply load it from a CDN (Hopefully CDNJS will update fairly quickly...). Note that it looks like Bootstrap JS files can be called via JS modules.

Note what different functionality is available, what the different syntaxes are, and if the removal of jQuery means calling JS features differently.

Also I need to learn if/how Bootstrap will integrate CSS Grid. Eventually once Nebula stops supporting IE11 it will also move into CSS Grid itself. #1396

Related: #1989 (Bootstrap Icons)

Useful links:

• https://getbootstrap.com/
• https://github.com/twbs/bootstrap/projects/11
• https://github.com/twbs/bootstrap/releases
• https://twitter.com/getbootstrap
• https://medium.com/@themeselection/bootstrap-5-release-date-important-updates-and-latest-tutorial-b9e66e807e67
• https://themesberg.com/blog/design/bootstrap-5-release-date-and-whats-new

[chrisblakley]

There is some confusion as to whether Bootstrap 5 removes support for both IE10 and IE11 or just IE10. It appears that it does in fact remove support for both, but also will come with an add-on (or something) that makes IE11 work (which I'm not interested in).

[chrisblakley]

When this update happens, Nebula will only provide options to use Bootstrap 4 and Bootstrap 5 (depending on how much the syntax changes and backwards compatibility with the core grid).

This means Nebula will drop the option to use Bootstrap 3 and Bootstrap 4 alpha 5.

I'm hoping to keep an option that uses the Bootstrap Grid only as well depending on what is available with v5.

[chrisblakley]

Alpha 1 was released. Here are the new docs: https://v5.getbootstrap.com/docs/5.0/getting-started/introduction/

We'll need to make sure Nebula forms use the appropriate classes and general structure for Bootstrap 5.

[chrisblakley]

Just tracking updates– Alpha 2 was released today. https://github.com/twbs/bootstrap/releases/tag/v5.0.0-alpha2

[chrisblakley]

Alpha 3 released today. https://github.com/twbs/bootstrap/releases/tag/v5.0.0-alpha3

[chrisblakley]

Check if Bootstrap 5 has anything to prevent modal content from appearing behind the backdrop. If not, consider adding this line (or something similar) to Nebula's main.js file:

jQuery('.modal-dialog').parent().on('show.bs.modal', function(e){
    jQuery(e.relatedTarget.attributes['data-target'].value).appendTo('body');
});

Another approach:

jQuery('.modal-dialog').parent().each(function(){
    jQuery(this).appendTo('body');
});

[chrisblakley]

Beta 1 released today. https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta1

[chrisblakley]

I think when Bootstrap 5 is released, the Nebula Bootstrap version selector option is only going to allow for v5 and v5 reboot/grid (so no option to use Bootstrap 4). The reason older versions were listed before was for IE support which is no longer a thing.

[chrisblakley]

Beta 2 released today. https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta2

[chrisblakley]

Beta 3 released today. https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta3

Note: This is the final beta– next release is stable!

[chrisblakley]

The Bootstrap documentation now also includes a bunch of UI examples: https://getbootstrap.com/docs/5.0/examples/

Reminds me of the Tailwind UI site: https://tailwindui.com/components

[chrisblakley]

I want to consider using the Bootstrap 5 navbar in the future too: https://getbootstrap.com/docs/5.0/components/navbar/

[chrisblakley]

Bootstrap 5 was released this afternoon.

Migration guide: https://getbootstrap.com/docs/5.0/migration/

[chrisblakley]

Initial Bootstrap 5 update has been completed. I removed the reboot + grid option and we can consider re-adding it later if needed.

Version selector has been removed. Also Bootstrap JS is dynamically loaded rather than relying on a manual Nebula option. So now Bootstrap is registered just like any other JS/CSS file.

I didn't add the modal detection JS (https://github.com/chrisblakley/Nebula/issues/1990#issuecomment-729341119) until we can determine if that has been resolved in v5.

Closing this now– any new bugs regarding Bootstrap 5 can be their own issue.