Bootstrap not working in Angular 6 app

4
votes

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.

2
jqueryangulartwitter-bootstrapbootstrap-4angular6
You can fix the problem in the Angular.json file like fix bootstrap in angular.json - Iman Bahrampour

2 Answers

8
votes

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

5
votes

First install bootstrap to the App:

npm install bootstrap@latest --save (flag is optional)

Then import the bootstrap to the index.html file in Angular:

@import '~bootstrap/css/bootstrap.css'; (~ means the node_Modules)

I hope this answers your question.