Migrate Bootstrap 4 to 5

I see Bootstrap 5 is now in beta with no new planned features before release. Looking at the general rate of progress I am guessing there could be a stable release within 2-3 months.

For ongoing client sites I’ll just carry on as I am, however I am working on a very large site for myself of around 100 pages in Blocs 4 that I want to future proof as much as possible without needing to rebuild large parts soon after, so I am wondering what the migration process will be like, assuming Blocs 4 enables Bootstrap 5 without too much of a delay.

Basically I think we need to understand what will break or need to be updated if we migrate a current site to use Bootstrap 5. I am also thinking about custom brics here and how they might be affected.

From what I’ve read some of the new Bootstrap features will include responsive fonts, modified grid system, updated forms and changes to CSS classes. It’s also dropping support for IE 10 & 11 if you have visitors still using those browsers.

Just a heads up, Blocs 4 will support both bootstrap 4 and 5 so Blocs will initially support new projects in bootstrap 5. Migrate may come later.

4 Likes

That doesn’t bother me for client sites or older ones, but possibly problematic on this big one that I’ll want to keep without needing a major overhaul for a few years. I’ve already added the 100 pages with substantial amounts of text and Seo, but nothing as yet in terms layout design and graphics. Ideally you would want some means of saving that as a Bootstrap 5 project, then pick up the pieces, rather than having to start entirely from scratch.

One of the major changes in bootstrap 5 is they have dropped jQuery.

To take full advantage of this, I’ll begin rewriting the core JS that’s used in Blocs sites to be vanilla JS. But it may take longer for developers to do the same.

This means moving to BS5 may not be so essential if you still continue to require JQuery for the site.

4 Likes

I don’t think I will require jQuery particularly. My main concern is just being able to launch the site knowing that it is able to take advantage of the changes in Bootstrap 5, rather than being stuck on Bootstrap 4. It’s simply due to the size of this project and the time involved that it needs to be future proofed as much as possible. I am guessing that certain changes like responsive text sizes might also make development in Bootstrap 5 faster with better results.

Awesome. I know you’ve said you love JQuery in the past, but I really hope Bootstrap 5 helps to largely diminish its overall use across the web.

1 Like

Hello @Norm, I understand of moving forward and keep up with new technology, and new frameworks and everything, but one little question:

When you say “rewriting the core JS” is that mean I’m not be able to code in JQuery any more? Or that mean I have to bring js externaly?

As for example I don’t like Vanilla, and is much more complex at least for now, for example from on example I have in others pages, lets take about fading an element:

In jQuery is like this:

$(el).fadeIn();

And when you want to do the same with Vanilla is like this:

function fadeIn (el) {
el.style.opacity = 0; var last = + new Date();
var tick = function () {
el.style.opacity = +el.style.opacity + ( new Date() - last) / 400;
last = + new Date(); if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
}; tick();
}fadeIn(el);

I understand that Vanilla have much more preferences about the fade in effect.

So or I’m missing something or it seems more difficult…

I imagine there will be a checkbox in Page settings to enable its inclusion. But the base code Blocs is responsible for (blocs.js scollFX.js) will be transitioned to vanilla JS.

3 Likes

Ah ok, that will work for me… but probably the best option is start to updating my coding…

Thank you @Norm

1 Like

I only know my bits of html and css, but from just looking at those code examples, I’d prefer jQuery all the way :wink:

Times like this, I wish we had more than a like button. Maybe a :rofl:

2 Likes

Just tried to choose BS5 in the “New Project” dialog, but it says we can’t start projects with it until BS5 is officially released. Any chance you’ll allow us to use now that the beta is out and stable? I’ve been developing sites with it for months (the alphas), and I don’t use use 4 anymore.

I see beta 2 is out this week and most changes related to documentation, suggesting final release may not be far away.

https://twitter.com/getbootstrap/status/1358987387796287492?s=21

1 Like

Yes, it’s exciting :sweat_smile:

Very much so. And 5.1. will most likely include support for CSS Grid :slight_smile:

1 Like