Bootstrap not working in Angular 6 app

Question

I want to make use of Bootstrap in an Angular 6 app and here is what I have done so far but nothing seems to be working out:

1) Installed bootstrap, jquery and popper.js using npm. 2) Entered the following in the Angular.json file

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

Am I missing something. This doesn't seems to work out.

Answer 1

in your style.scss files use import

@import "node_modules/bootstrap/scss/bootstrap.scss"

and remove "node_modules/bootstrap/scss/bootstrap.scss" from angular.json file