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 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.
Please check the rest of the article which was first posted on https://blog.abirana.com/how-to-migrate-convert-bootstra-4-to-bootstrap-5
Top comments (0)