Bootstrap 5 Migrate Tool

2 min readMar 25, 2024

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