A command-line script designed to help you upgrade your Bootstrap 4 projects to Bootstrap 5. It uses gulp with gulp-replace to replace class names within your folder of HTML pages/templates.
- Replaces all the Bootstrap 4 class names with the renamed Bootstrap 5 class names
- Replaces deprecated components (such as
.jumbotronand.media) with utility classes - Renames all the data attributes (such as
data-toggleanddata-target) to the new names - Updates all Bootstrap v4 CDN links (cloudflare, jsdelivr, stackpath.bootstrapcdn.com and unpkg) 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
Clone this repo and then run the following command:
npm installCopy your HTML templates to the src folder.
Then run the following command to start the migration:
npx gulp migrateThe 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 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} functiondest: ./- string that will be passed to the gulp {@link dest} functionoverwrite: true- overwrite the existing files in place. Cannot be used with --dest flagverbose: true- print the path of each generated / modified file to the consoledefaultFileGlob: '**/*.{asp,aspx,cshtml,gohtml,gotmpl,ejs,erb,hbs,html,htm,js,jsp,php,ts,twig,vue}'- default glob for files to search in. Default: Search all folder and files recursively
- Input: Bootstrap 4 HTML template
- Output: Bootstrap 5 HTML template
- Use the Bootstrap Deprecated Classes browser extension on your site post migration to see if anything is missed
- If you used negative margins/padding classes (e.g,
.mt-n1or.pb-n2) note that these are not included in the Bootstrap CSS CDN so you may want to add those - Note that Bootstrap v5 no longer includes print styles. Consider using: Bootstrap Print CSS
- Bootstrap has issues with Windows Contrast themes. Consider using: Bootstrap Forced Colors CSS
- You probably don't need to support Internet Explorer 11 anymore, but if you do consider using: Bootstrap-ie11
