# Migrating from Bootstrap 4 to Bootstrap 5 **URL:** \ **Category:** Bootstrap\ **Tags:** bootstrap4, bootstrap5\ **Created:** [March 11, 2021, 7:17pm UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098 "2021-03-11T19:17:09Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [March 11, 2021, 7:17pm UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/1 "2021-03-11T19:17:09Z")
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 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](https://getbootstrap.com/docs/5.0/migration/) _ **Do let me know if you see something is missing.** _ ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [March 12, 2021, 8:32am UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/2 "2021-03-12T08:32:21Z")
Hi @abirana, Looking forwards to the Bootstrap 5 blocks and templates! Use them 😍 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 ---
**Author:** ![abirana](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/abirana/32/4162_2.png) [@abirana](https://forum.pinegrow.com/u/abirana)\ **Post date:** [March 12, 2021, 10:12am UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/3 "2021-03-12T10:12:23Z")
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** 🤣 🤣 🤣 🤣 ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [March 12, 2021, 10:15am UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/4 "2021-03-12T10:15:38Z")
> [@abirana](#): > > I feel like my mind is going through some extra compilation just to process **padding left** to **padding start** 🤣 🤣 🤣 🤣 Exactly my idea too! 😃 ---
**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 12, 2021, 10:46am UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/5 "2021-03-12T10:46:49Z")
> [@abirana](#): > > And honestly I had the same question, beside everything, why change **left** to **start** and **right** to **end**??? 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](https://drafts.csswg.org/css-logical/#propdef-margin-inline-start) ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [March 12, 2021, 12:01pm UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/6 "2021-03-12T12:01:03Z")
> **[\[Feedback\] new names of utilities classes in bootstrap 5.0 beta-1 look weird. ·...](https://github.com/twbs/bootstrap/discussions/32402)** > > //github.com/twbs/bootstrap/discussions/32402 ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [March 12, 2021, 6:26pm UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/7 "2021-03-12T18:26:02Z")
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… > **[Why CSS Grid is better than Bootstrap for creating layouts | Hacker Noon](https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163)** yet another free CSS GRID course. > **[CSS Grid Tutorial - Learn CSS Grid For Free | Scrimba](https://scrimba.com/learn/cssgrid)** > > This tutorial teaches you CSS Grid through 14 interactive screencasts. You'll learn all the key concepts while building three awesome layouts: a website, an image grid, and an article. Plus, you'll learn how to combine CSS Grid with Flexbox. 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](https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4) Some really good comments here. Worth clicking on and reading. > **[How I stopped using Bootstrap's layout thanks to CSS Grid](https://blog.theodo.com/2018/03/stop-using-bootstrap-layout-thanks-to-css-grid/)** > > Why did I stop using Bootstrap? Bootstrap is too verbose: you need plenty of div even if you only have a couple of blocks in your layout… 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. ---
**Author:** ![AllMediaLab](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/allmedialab/32/2079_2.png) [@AllMediaLab](https://forum.pinegrow.com/u/AllMediaLab)\ **Post date:** [September 10, 2021, 9:19am UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/9 "2021-09-10T09:19:45Z")
This looks like spam to me! ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [September 10, 2021, 8:27pm UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/10 "2021-09-10T20:27:54Z")
what does, My post? if so, Its not, your 6 months late and learn to read, its not Spam 😉 its a detailed comparison with some guidelines and some ideas and pointers., . From the then Sharp end, So long ago, I can barely remember posting it. So either add something supportive, ignore and walk on bye, Not just spam bomb a post :)… 6 Months Later. But, apart from that, How are you doing? Its full on here, Not had time to post anything for ages, Just reading everything and a lot of the topics are now above my pay grade, so Its better for me to be quiet than just waffle the wrong stuff. ok cheerio ---
**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\ **Post date:** [September 10, 2021, 11:39pm UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/11 "2021-09-10T23:39:56Z")
The post that was flagged as spam by @AllMediaLab later got removed from this thread… and is not visible anymore… nothing to do with your post @schpengle ---
**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\ **Post date:** [September 11, 2021, 12:10am UTC](https://forum.pinegrow.com/t/migrating-from-bootstrap-4-to-bootstrap-5/5098/12 "2021-09-11T00:10:14Z")
hee hee, thought not, so had a bit of fun instead 😃