https://github.com/coliff/bootstrap-5-migrate-tool
A command-line tool designed to help you upgrade your Bootstrap 4 projects to Bootstrap 5
https://github.com/coliff/bootstrap-5-migrate-tool
bootstrap4 bootstrap5 convert upgrade
Last synced: 3 months ago
JSON representation
A command-line tool designed to help you upgrade your Bootstrap 4 projects to Bootstrap 5
- Host: GitHub
- URL: https://github.com/coliff/bootstrap-5-migrate-tool
- Owner: coliff
- License: mit
- Created: 2023-07-05T01:43:17.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-24T12:23:36.000Z (3 months ago)
- Last Synced: 2025-06-24T13:34:07.578Z (3 months ago)
- Topics: bootstrap4, bootstrap5, convert, upgrade
- Language: HTML
- Homepage:
- Size: 306 KB
- Stars: 77
- Watchers: 5
- Forks: 20
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Support: .github/SUPPORT.md
Awesome Lists containing this project
README
# Bootstrap 5 Migrate Tool
[](https://raw.githubusercontent.com/coliff/bootstrap-5-migrate-tool/main/LICENSE)
[](https://github.com/marketplace/actions/super-linter)
[](https://github.com/coliff/bootstrap-5-migrate-tool)
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.
## Features
- Replaces all the 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, 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
## Usage
Clone this repo and then run the following command:
```bash
npm install
```
Copy your HTML templates to the `src` folder.
Then run the following command to start the migration:
```bash
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](#options) section for more details.
Read the official Bootstrap 5 migration guide here:
## 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,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
## Demo
- Input: [Bootstrap 4 HTML template](https://coliff.github.io/bootstrap-5-migrate-tool/src/index.html)
- Output: [Bootstrap 5 HTML template](https://coliff.github.io/bootstrap-5-migrate-tool/dest/src/index.html)
## Post-migration Tips
- Use the [Bootstrap Deprecated Classes browser extension](https://github.com/julien-deramond/bootstrap-deprecated-classes-extension) on your site post migration to see if anything is missed
- If you used negative margins/padding classes (e.g, `.mt-n1` or `.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](https://github.com/coliff/bootstrap-print-css)
- Bootstrap has issues with Windows Contrast themes. Consider using: [Bootstrap Forced Colors CSS](https://github.com/coliff/bootstrap-forced-colors-css)
- You probably don't need to support Internet Explorer 11 anymore, but if you do consider using: [Bootstrap-ie11](https://github.com/coliff/bootstrap-ie11)