Bootstrap not working properly in Angular 6 Bootstrap not working properly in Angular 6 angular angular

Bootstrap not working properly in Angular 6


You have to install both bootstrap and JQuery:

npm install bootstrap jquery --save

Then you will find these files in your node module folder:

node_modules/jquery/dist/jquery.min.jsnode_modules/bootstrap/dist/css/bootstrap.min.cssnode_modules/bootstrap/dist/js/bootstrap.min.js

Then you have to update your angular.json file:

In the architect, build section, or even test section if you want to see Bootstrap working as well when testing your application.

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

If you do not add the jquery.min.js script Bootstrap will not work.

Another requirement is popper.js if you need Bootstrap dropdown then you will need to install it and add the script file as well

npm install popper.js

Then add this script as well

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

Bootstrap dropdown require Popper.js (https://popper.js.org)


If you are adding the bootstrap path into the angular.json file, make sure it is the styles within the project\architect\build. Not the one in the project\architect\test.

{"projects": {        "architect": {            "build": {                    "styles": [                        "node_modules/bootstrap/dist/bootstrap.min.css",                         "src/styles.css"                    ],            "test": {                    "styles": [                         "src/styles.css"                    ],


dear friend iam studying same angular6 tutorial.I also faced same situation.finally I have solved thisFirst uninstall bootstrap.next step is to install bootstrap by following command

npm install --save bootstrap@3 A

next go to styles.css and paste

@import "node_modules/bootstrap/dist/css/bootstrap.css"

your application will defenitely work exactly same as that in that video tutorial of udemy