Abi Rana
Abi Rana's Feed


Abi Rana's Feed

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

Abi Rana's photo
Abi Rana
·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, 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.

Share this