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: 

1 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:

1 _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: 

1 "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:

1 <div class=”col-xs-12 col-md-5”></div>

 Should become in V4:

1 <div class=”col-12 col-md-5”></div>

 

Example V3:

1 <div class=”hidden-xs visible-md”></div>

 Should become in V4:

1 <div class=”d-none d-md-block”></div>

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._