JS data name changes for menu triggers and dropdown

Few other pointers

• All class names with left/right and l/r has been changed to start/end and s/e
• Dropped classes - .media, .from-group, .from-row, .from-inline
• Form labels now require the .form-label class, which has margin bottom applied
• Negative margins are disabled in Bootstrap 5
• Columns doesn’t have position: relative property
• Form row layout changed
• Input group layout changed
• Navbar link active class is set on the link itself not on the parent
• If you put a column outside a row, always set col-* class for all the viewport that you need to cover. Mostly should be col-12 for the smallest viewport.

Disclaimer: This doest not cover everything that has been updated in Bootstrap 5. My main focus was all of the classes that has been changed and throughout the project I think I've encountered most of the classes. I made this list and used search and replace method to rename all those classes. I work on VSCode, which let me search and replace within the entire folder. But beware, if you make a mistake you may not be able to undo. So do make a backup of your project.

I'll try to write about other changes but for now if you want to know more about all other changes please go through the Bootstrap 5 documentation here, https://getbootstrap.com/docs/5.0/migration/

Do let me know if you see something is missing.

Some closing thoughts

This is my first ever approach on officially blogging. I've been thinking of blogging for years; always wanted to do it on my own site, but what the heck. So today, I thought to use Hashnode's platform and just start writing. I think this is a good info to put out in the world, since I didn't find much when I was looking for it. Your support will be really appreciated.