Bootstrap 5 migration
Help UKRAINE
! Your action matters!
Donate to support Ukrainian Army!
Donate to charity funds!
Organize/join street protests in your city to support Ukraine and condemn Russian aggression!
Expose and report Russian disinformation! #StandWithUkraine
Bootstrap 5 is finally here. One of the most requested features for a very long time is available for us. So let’s see what it can do.
Before we begin I would like to highlight that currently, this feature is in Preview status meaning it is not suitable for production. Although the GA date is set for November of this year I would advise to really test it out before moving to production.
How to migrate
First, we need to enable Bootstrap 5 for our environment. To do so go to Power Platform Admin Center, select an environment that you need, and in the Resources tab select Power Pages sites, then in the header select Enable Bootstrap v5 for new sites (preview).
Next, we would need to use PAC CLI to convert our site to use Bootstrap 5. Microsoft will not automatically convert your existing website to keep backward compatibility. Instead, they provide a new command pac powerpages bootstrap-migrate to migrate your site.
Connect to the environment you want via PAC CLI (either via auth command or through Power Platform Tools extension). Download your website via the pac powerpages download command. Then run pac powerpages bootstrap-migrate -p “path-to-your-folder”. You can also use my Power Pages Helper extension to invoke this command.
Bootstrap-migrate will create a new folder with the Bootstrap 5 version of your site. In the folder,beside the updated portal, you will find a logs.txt document which will highlight which files were changed by the migration tool. This is useful for troubleshooting, validation and general knowledge purposes. For example, I have a template called bootstrap3-test that uses a Bootstrap 3 carousel for images. After migration in logs.txt, I can find a detailed description of which classes were removed or replaced with their Bootstrap 5 alternatives.
Also in the Site Settings file, you can find a new setting called Site/BootstrapV5Enabled which says site to use Bootstrap 5.
After migration we just need to upload the updated version back to the system using the pac powerpages upload command and enjoy new styles.
Version comparison
Main Page and Navigation Menu Bootstrap 3
Main Page and Navigation Menu Bootstrap 5
As you can see after migration navigation looks more condensed and paddings around links are completely different. Also, the logo and company name are shifted to the right.
Contact Us form Bootstrap 3
Contact Us form Bootstrap 5
Form controls look almost the same, but in the Bootstrap 5 version, they are more rounded by default.
As you can see not everything went smoothly - the navigation menu after migration requires additional CSS styling to look good. So be careful and make sure you inspect all pages as your styling might break in unexpected places.
Other changes
Beyond Bootstrap 5 Microsoft also updated icons to use Font Awesome 6 - so you can enjoy a bigger selection of icons, styles and improved performance.
Conclusion
Bootstrap 5 was long awaited update for Power Pages. This change will allow us to create more complex and modern-looking websites. However, the transition isn’t smooth and will require effort to ensure that migrated styles work as well as the originals.