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 of migrating, 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 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. 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, Migrating to v5 · Bootstrap v5.0
Do let me know if you see something is missing.
for every website as a framework for the design. Already converted a couple of your designs to BS5 with external SVG’s. Only wonder who came up at Bootstrap with the idea to change ml, mr, pl and pr in ms, me, ps and pe. Doesn’t sound and looks logic to me!
