DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Cheatsheet on converting Bootstrap v4 project to Bootstrap v5
Abi Rana
Abi Rana

Posted on

Cheatsheet on converting Bootstrap v4 project to Bootstrap v5

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)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.