CODEWITHSUNDEEP
jqueryangulartwitter-bootstrapbootstrap-4angular6
s4tr2
s4tr2

Reputation: 415

Bootstrap not working in Angular 6 app

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.

Upvotes: 4

Views: 6664

Answers (2)

Coder.exe
Coder.exe

Reputation: 161

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.

Upvotes: 5

לבני מלכה
לבני מלכה

Reputation: 16251

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

Upvotes: 8

Related Questions