1. Home
  2. Using Blocs
  3. Blocs
  4. Migrate a Blocs V2 Project to Blocs V3
  1. Home
  2. Getting Started
  3. Migrate a Blocs V2 Project to Blocs V3
  1. Home
  2. Tips
  3. Migrate a Blocs V2 Project to Blocs V3

Migrate a Blocs V2 Project to Blocs V3

One of the biggest changes in Blocs 3 is the fact it no longer creates websites using Bootstrap 3 and instead uses the new and improved Bootstrap 4 framework.

Migration Tool

Projects created in Blocs 2 use the Bootstrap 3 framework which is obviously not ideal, as Bootstrap 3 and 4 are quite different. However, Blocs 3 comes with a migration tool built in that is designed to help convert Blocs 2 projects (Bootstrap 3) into Blocs 3 projects (Bootstrap 4) with as little upset as possible.

When migrating a Blocs 2 project (Bootstrap 3) to a Blocs 3 project (Bootstrap 4) you are guaranteed to notice various aspects of your site may require further attention, this is due to a number of factors that we will expand on throughout this post.

Also remember Blocs V2 can run alongside Blocs V3, so if you have large sites or projects with deadlines, avoid migrating these unless you have the time to make substantial manual changes that may be required.

Back up your project

The most important thing to remember before you migrate a project from Blocs 2 to Blocs 3 is to back it up. Once a project is migrated and saved it can no longer be reverted back, meaning it cannot be opened or used with Blocs V2. So please back up your projects before you continue to migrate.

The Migration Process

When you open a Blocs V2 project in Blocs V3, Blocs will ask if you would like to migrate the project to Blocs V3. It’s important at this point to make sure you have a backup of your project so you can easily revert back to Blocs 2 if your migration requires a lot more work than you had initially envisaged.

When Blocs migrates a project to Bootstrap 4, it checks the projects HTML for references to old Bootstrap 3 classes and also scans the HTML structure making changes when required. It’s important to remember Blocs does not change any custom classes, so any visual styling issues caused by custom classes will need to be manually amended.

Natural Visual Differences

There are a number of factors that will cause your site to look different in Blocs V3 compared to Blocs V2. The following are normal and caused because of key changes to the Bootstrap framework.

Text is bigger

After migration the most common change you may notice is the text may look bigger. This is because Bootstrap 4 now uses larger font sizes across all of its’ core typography styling. The reference below illustrates the differences between Bootstrap 3 and 4 regrading font sizes for the heading tags.

Bootstrap 3

H1 = 36px
H2 = 30px
H3 = 24px
H4 = 18px
H5 = 14px
H6 = 12px

Bootstrap 4

H1 = 2.5 rem
H2 = 2 rem
H3 = 1.75 rem
H4 = 1.5 rem
H5 = 1.25rem
H6 = 1rem

Toggle Symbol Styling

Another common visual issue when migrating is problems with the toggle symbol styling. This is because, in Bootstrap 4, the navigator toggle symbol is now an SVG image. This means it is no longer possible to customise the toggle symbol with old subclasses from Blocs V2. To change the colour of the toggle symbol in Blocs V3 for light or dark backgrounds, you will need to set the parent navigation Brics theme style.

Cache Issues

When you migrate a project to Bootstrap 4 and export it, it is very likely server cache will cause your site to initially look broken once it’s hosted. This can be easily fixed by clearing a browser’s cache. You can read more about addressing browser cache issues here.

Beginners Note

Don’t forget, Blocs V3 also comes with access to the WebKit developer tools in preview mode, simply right click and inspect to access them. Using the dev tools is a great way to find out which custom classes may be causing unwanted styling issues in your site, making it quicker to fix.

Updated on 25th November 2018

Was this article helpful?

Related Articles