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.
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.
H1 = 36px
H2 = 30px
H3 = 24px
H4 = 18px
H5 = 14px
H6 = 12px
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.
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.