# All the class name changes migrating from Bootstrap 4 to Bootstrap 5

Hi guys, I've been working on  [Pinegrow's Bootstrap blocks and templates](https://pinegrow.com/docs/bootstrap-blocks/bootstrap-4-blocks/), 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 <br> pr > pe |
| Margins | ml > ms <br> mr > me |
| Gutters | no-gutters > g-0 |
| Font Styles | font-weight- > fw- <br> font-style- > fst- |
| Alignments | text-left > text-start <br> text-right > text-end |
| Ratio/Embed | embed-responsive > ratio <br> embed-responsive-16by9 > ratio-16x9 |
| Badges | badge-primary > bg-primary <br> badge-pill > rounded-pill |
| Form | form-group > mb-3 (as alternative) <br> form-row > row |
| Border | border-left > border-start <br> 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.