Updating to Bootstrap 4
This page describes the steps required to update an SmartComponent Library Angular Frontend Project using Bootstrap 3 to Bootstrap 4.
SmartComponent Library Angular Frontend Update
To update run the following command in the project root directory:
scl update
Dependency Update
As the CLI tool will not replace existing dependencies with newer versions to minimize the risk of breaking your project, please also run:
_npm install -D bootstrap@4_in the root directory of your project.
Workspace Configuration
Change <project_root>/angular.json as follows:
Add the following line after jQuery and before bootstrap:
"node_modules/popper.js/dist/umd/popper.min.js",
Your “scripts” setting should now look similar to this:
HTML templates
You might have to change some HTML templates due to changes in Bootstrap 4.
See https://getbootstrap.com/docs/4.0/migration/ for details.
Examples
Example V3:
Should become in V4:
Example V3:
Should become in V4:
Size breakpoints
a new breakpoint has been introduced in V4, “xl”.
V3 breakpoints: xs, sm, md, lg
V4 breakpoints: xs, sm, md, lg, xl
More information on bootstrap V4 screen size breakpoints can be found here: https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints
Root component HTML template
Please ensure that you update the root component HTML template, located at _src/app/custom-root/custom-root.component.html._