Introducing Bootstrap 5 support: LiveCanvas 2.0 and Picostrap5

We're happy to announce that the much awaited Bootstrap 5 compatibility is here. New versions for both the LiveCanvas plugin and the picostrap theme are available for download. Let's dive into the details!

The picostrap5 theme

The first step to be able to support Bootstrap5 was to fork our beloved picostrap theme and re-adapt it a little bit to match all the small changes introduced by this new iteration of the world's most popular frontend framework.

We named this theme picostrap5, to make things more clear.

As Bootstrap 5 ditches jQuery, we don't need to use BootstrapNative anymore, and we can embrace the standard Bootstrap Javascript.

If you're used to picostrap and it's powerful Customizer settings, you won't experience radical changes, except for the fact that the RFS option is enabled by default, to match the Bootstrap 5 behaviour.

What we recommend of course is to use picostrap5 on new projects, and keep on using picostrap on existing sites - this is not an "upgrade", but another theme, mind you.

LiveCanvas 2.0

This important update of LiveCanvas brings compatibility with Bootstrap 5 while continuing to fully support Bootstrap 4.

When used in conjunction with picostrap5, LiveCanvas will automatically switch in order to recognize Bootstrap 5 classes and it's new XXL breakpoint, as you can see in the video below

 

 

As you might have heard of, Bootstrap changed the name of many utility classes, especially in the spacing utility classes department, eg mr-1 became me-1.

So, we've deeply revised and  reworked all the HTML blocks and the readymade sections in order to adapt them for Bootstrap 5.

We added some more readymade sections as well, collecting the most useful new elements from the Bootstrap 5 examples page.

 

 

Some other minor changes include:

• Color palette adds text-white-50, text-black-50, and text-body classes
• The WYSIWYG text editor has been updated with the new font-weight utility classes
• Changes to reflect name changes to responsive embed utility classes

We hope you will enjoy this new release. Bootstrap 5 is not a radical departure from v4, but adds some cool stuff for sure. In case you want to study what's changed, code-wise, have a look at the Bootstrap migration page.

Now let's go to build your next Web masterpiece.

If you're already a customer, you can download LiveCanvas and picostrap from the members area.

If you're still not using LiveCanvas, get your plan today and get started immediately!