Upgrade Bootstrap projects to the latest Bootstrap version

Note: The process described here works for upgrading an existing Bootstrap 4.x project to the latest version of Bootstrap 4. The same for Bootstrap 3. It will not correctly upgrade Bootstrap 3 projects to Bootstrap 4. Bootstrap 3 and 4 are not compatible.

Note: if you did any modifications directly to Bootstrap CSS files, you should not use this feature because it will overwrite those files. The best practice is to always override framework styles in a separate custom CSS file.

Note: It’s always a good idea to create backup copies of projects before doing such automated operations.

Bootstrap 4

To update your existing 4.x projects to the latest version of Bootstrap 4 open File › Manage libraries and plugins.

Pinegrow File menu open with the Manage libraries and plugins option highlighted.

There select Bootstrap 4 › Resources.

Libraries and Plugins Manager for index.html with Bootstrap 4 active and its Resources link highlighted.

There check the “Overwrite files if they exist” checkbox and click on either “Add to page” or “Add to all pages in project” button.

Update resources dialog for Bootstrap 4.2.1 with the Overwrite resources checkbox checked and buttons to add or update files on index.html.

Pinegrow will then give you a choice of CND hosted files or local files.

Use CDN or local files dialog asking how to include Bootstrap 4, with the Add with CDN and Add with local files buttons.

Select the one you want and that’s it.

Bootstrap 3

For Bootstrap 3, choose Bootstrap 3 in “Manage libraries and plugins”, the rest of the process is the same.

Updating SASS Bootstrap 4 Theme

In case you’re also using Pinegrow’s Bootstrap theming feature that works with Bootstrap SASS files and lets you customize Bootstrap by using SASS variables, go to Page › “Customize & Bootstrap theme” to update those files.

The file custom.scss that contains your custom modifications will not be overwritten in the process.

Page menu open with the Customize and update Bootstrap Theme option highlighted.

Confirm the dialog:

Dialog asking whether to customize Bootstrap with SASS variables, explaining that custom.scss will be created, with the Sure, let's do it button.

Confirm update:

Dialog asking whether to update the bootstrap_theme folder to the latest Bootstrap, noting custom.scss will not be overwritten.

Confirm to close opened documents first and do the update:

Close open pages dialog stating that all open pages must be closed first, with the Close pages and update button highlighted.