Add Bootstrap 4 to Angular 6 or Angular 7 application

Question

I am working on Angular application using bootstrap 4.

I need help related to scss adding in my angular application.

My question is:

• Is the way of adding bootstrap 4 scss same in Angular 6 and Angular 7 or not?

i.e.

npm install bootstrap --save  

And, open angular.json file and add bootstrap file path to the styles section. Like:

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

Is the above way is same for both the version of angular.

Answer 1

You need to do the following:

Add Bootstrap to package.json (which is done with npm install bootstrap --save)

Add Bootstrap to angular.json (jQuery is required too)

  "styles": [
     "styles.css".
     "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
     "../node_modules/jquery/dist/jquery.min.js",
     "../node_modules/popper.js/dist/umd/popper.min.js",
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Reference Bootstrap in the Angular app (app.module.ts)

import bootstrap from "bootstrap";

Demo: https://codesandbox.io/s/kmm2q7zvko
Article: https://medium.com/wdstack/angular-7-bootstrap-4-starter-25573dff23f6