Bootstrap 5 Migrate Tool

Posted on
Contents

Migrating a website project from Bootstrap 4 to Bootstrap 5 involves renaming a lot of classes which can be a tedious task. To help with this, I created a command-line tool that will do all the renaming for you across all pages in your project. It’s a comprehensive script which not only renames all the relevant classes, but also updates any deprecated elements and attributes to relevant classes and more.

Features

  • Replaces all Bootstrap 4 class names with the renamed Bootstrap 5 class names
  • Replaces deprecated components (such as .jumbotron and .media) with utility classes
  • Renames all the data attributes (such as data-toggle and data-target) to the new names
  • Updates all Bootstrap v4 CDN links (cloudflare.com, jsdelivr.net, stackpath.bootstrapcdn.com and unpkg.com) to latest version of Bootstrap v5
  • Options to overwrite the existing files in place or save the migrated files to a different folder
  • Can convert not only HTML files but also ASP, CSHTML, EJS, ERB, HBS, JSP, PHP, VUE, and other template files
  • Provides a summary of the changes made

How to use the tool

Clone the repo and then run the following command: 

npm install

Copy your HTML templates to the src folder.

Then run the following command to start the migration: 

npx gulp migrate

The migrated HTML templates will overwrite the files in place by default. If you want to keep the original files, you can use the --dest flag to specify a destination folder. See the Options section for more details.

Read the official Bootstrap 5 migration guide here: https://getbootstrap.com/docs/5.3/migration/

Options

Options that may be set via CLI flags. For example: npx gulp migrate --src "./src-dir" --overwrite --verbose

  • src: './src' - string that will be passed to the gulp {@link src} function
  • dest: ./- string that will be passed to the gulp {@link dest} function
  • overwrite: true - overwrite the existing files in place. Cannot be used with –dest flag
  • verbose: true- print the path of each generated / modified file to the console
  • defaultFileGlob: '**/*.{asp,aspx,cshtml,ejs,erb,hbs,html,htm,jsp,php,twig,vue}' - default glob for files to search in. Default: Search all folder and files recursively

Demo

Input (created using Bootstrap 4):

And here’s the same page after running the migration tool:

Contribute

This tool is open-source and available on GitHub: Bootstrap 5 Migrate Tool .

Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or a pull request.

You might also like