Migrating from Bootstrap 4 to Bootstrap 5

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 of migrating, 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.

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. 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, Migrating to v5 · Bootstrap v5.0

Do let me know if you see something is missing.

5 Likes

Hi @abirana,

Looking forwards to the Bootstrap 5 blocks and templates! Use them :heart_eyes: for every website as a framework for the design. Already converted a couple of your designs to BS5 with external SVG’s. Only wonder who came up at Bootstrap with the idea to change ml, mr, pl and pr in ms, me, ps and pe. Doesn’t sound and looks logic to me!

Regards,

David

1 Like

You should get those updates very soon.

Bootstrap is the go to framework for most of my projects as well.

And honestly I had the same question, beside everything, why change left to start and right to end??? I can relate this with flex properties but I it’s hard for me to relate this with paddings, margins and alignments. Currently, I feel like my mind is going through some extra compilation just to process padding left to padding start :rofl: :rofl: :rofl: :rofl:

1 Like

Exactly my idea too! :smiley:

1 Like

The people at Bootstrap are trying to future-proof and get ahead of the new CSS logical properties draft. The CSS standards are being heavily reworked to be more language/content agnostic.
https://drafts.csswg.org/css-logical/#propdef-margin-inline-start

2 Likes

Well! Lets have a (not so) heated debate…about BSv5.

Its getting talked about a bit over on their github repository above… link provided a la @AllMediaLab.

mmmm, I supposes if your totally muscle memoried into it and have its logic ingrained it will be slightly mind bending.
-But then, so was learning it all in the first place… so the logic of the likes of @Thomas , who built his own framework seems somewhat superior -providing your the sole maintainer or its incredibly clear to follow.

if you dont build your own dreams,
then
someone will pay you to build theirs

kind of comes to mind.

If you use Bootstrap, which is someone elses dream… and your not paying for it,
as in its free… then
alas, you become their little bitch - your think your following your own dream,
in your little world of web creativity,
but, it’s kind of on the back of another`s…

…And they can choose to dream a different dream A N Y time…
and your the little dancing monkey on its strings and have to dance along as they string tweak,
since,
this bit, just aint your dream…

While the approach and explanation of the BS Devs, comes kind of close to arrogant… it doesn’t quite cross the line, as I see their logic… BUT… and a big but.

They have Gazillions of Devs using their Framework.
And to just suddenly go
*Ding Ding! ok, off the bus. now Please, All change, get on the other bus… *

is a bit of an ask.

If it’s that bad.
Just stick with BS4 … framework and all the blocks and kits. you have and keep rolling.
they’ll still work.
Then consider moving to another Framework for the future, or
yes… grow your own!

I got kicked in the nuts with BS when I first started using it in BS 3.
Was following along with PG tutorials, getting all enthusiastic with my first project.

which used CARDS

…by the time I was doing the tutorial (which used cards) … they no longer existed.
took me a week or two to figure out what was wrong.

infuriating.
Ive never used BS since.

And…since BS isn’t even based on CSS GRID yet! (hello! wake up devs)
then… get around to learning all this crazy new semantics just in time… for
v6 to kick you in the nuts and dump CSS Grid on you -with some crazy new in house Twitter ™ layout semantics…

I’m sure that will be a conversation starter, akin to a meeting between Hitler and Stalin…

SO maybe beat the rush and just go, full blown CSS GRID

and beat the pain of the V6…

yet another free CSS GRID course.

Actually, I have just really enjoyed going off for a very informative read on a couple of sites, about BS and CSS Grid etc.
they really do push the case for pure CSS GRID and FlexBox.

Neither of which I’m terribly good at, but then, Neither am i with BS… although PG makes things shiny.

But, ive Ive to put time and effort into learn a layout methodology, that is MORE future proof,
it would be CSS Grid and FlexBox.

Not to an in house, solution which just cut the babies left and right arms and legs off
then grafted them back onto its start and end … so that a lot of other people can haver thier babies look the same…

there is already much much to muchness in websites due to the simplicity of BS.

anyway, these were good reads.

https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4

Some really good comments here. Worth clicking on and reading.

The comments on this are really good! Not too many and really well formulated.
even the one chap who kind of doesnt get it has some good points.

1 Like