All the class name changes migrating from Bootstrap 4 to Bootstrap 5
Cheatsheet on converting Bootstrap v4 project to Bootstrap v5
Hi guys, I've been working on Pinegrow's Bootstrap blocks and templates, currently to migrate from Bootstrap 4 to Bootstrap 5. And through the process, I guess I went through almost all of the classes and changes. Therefore, I thought it would be helpful to share those changes. If you are thinking how to migrate from Bootstrap v4 to v5, this list can be handy; so you can just search and replace them.
| Utilities | Change |
| Paddings | pl > ps pr > pe |
| Margins | ml > ms mr > me |
| Gutters | no-gutters > g-0 |
| Font Styles | font-weight- > fw- font-style- > fst- |
| Alignments | text-left > text-start text-right > text-end |
| Ratio/Embed | embed-responsive > ratio embed-responsive-16by9 > ratio-16x9 |
| Badges | badge-primary > bg-primary badge-pill > rounded-pill |
| Form | form-group > mb-3 (as alternative) form-row > row |
| Border | border-left > border-start border-right > border-end |
| Border Radius | rounded-lg & rounded-sm > rounded-1, rounded-2 & rounded-3 |
| Button Block | btn-block > d-block w-100 (as alternative) |
| Visually Hidden | sr-only > visually-hidden |
JS data name changes for menu triggers and dropdown
| Changes |
| data- > data-bs- |
| data-ride > data-bs-ride |
| data-target > data-bs-target |
| data-slide > data-bs-slide |
| data-togglet > data-bs-toggle |
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.