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

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

Cheatsheet on converting Bootstrap v4 project to Bootstrap v5

Mar 11, 2021·

5 min read

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.

Paddingspl > ps
pr > pe
Marginsml > ms
mr > me
Guttersno-gutters > g-0
Font Stylesfont-weight- > fw-
font-style- > fst-
Alignmentstext-left > text-start
text-right > text-end
Ratio/Embedembed-responsive > ratio
embed-responsive-16by9 > ratio-16x9
Badgesbadge-primary > bg-primary
badge-pill > rounded-pill
Formform-group > mb-3 (as alternative)
form-row > row
Borderborder-left > border-start
border-right > border-end
Border Radiusrounded-lg & rounded-sm > rounded-1, rounded-2 & rounded-3
Button Blockbtn-block > d-block w-100 (as alternative)
Visually Hiddensr-only > visually-hidden

JS data name changes for menu triggers and dropdown

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,

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.