Angular 5 with Bootstrap 4 not working

The following is an understandable consolidation of various tutorials that I have gone through. Please remember that it depends on the versions you are using.

1. Install the angular cli

npm install -g @angular/cli 

2. Create an Angular project using angular cli

ng new my-awesome-project 

3. Install dependencies

Next, cd in your new project and install requiered dependencies:

npm install bootstrap --save npm install jquery --save npm install popper.js --save 

Whatch out about popper.js. This lib is used by Bootstrap. However, you have to precisely run npm install popper.js --save because popper is another js lib distributed by npm.

Here is my current configuration:

angular cli: 1.6.8 angular: ^5.2.0 bootstrap: ^4.0.0 jquery: ^3.3.1 popper.js: ^1.12.9 

4. Integrate the dependencies to your project

Now that you have all your dependencies, you'll have to "plug" bootstrap into your project.

Open .angular-cli.json file and update script section as follows:

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

Finally, open src\styles.css and add:

@import "~bootstrap/dist/css/bootstrap.css"; 

The last operation to be necessary when running angular project in production mode.

npm install bootstrap --save

Open .angular-cli.json or angular.json file and update script section as shown in above answers. Also add it to styles array:

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

If this doesn't work, then open src\styles.css and add:

@import "~bootstrap/dist/css/bootstrap.css";

Use npm install bootstrap to install Bootstrap 4.0.0. Take a look at Bootstrap itself and its npm-package.

(The package for Bootstrap 3.3 is bootstrap@3)

Make sure you have,

1. Added the bootstrap.css file 2. Copied the fonts folder of bootstrap into the project 3. Added the file name in angularcli.json file 

Bootstrap has dependency on popper and jquery. It is always a good idea to install these modules along with bootstrap.

npm install --save bootstrap@4 jquery@version popper@version 

using --save adds these dependencies in your package.json.

Then you can go to angular.json (Angular 6 and cli v6) or angular-cli.json (Angular 5 or below and cli v1.7) and paste the css of bootstrap in node modules under styles array. And add jquery, popper and bootstrap.js files under scripts.

Hope that helps!

you must downgrade to a beta version of bootstrap instead of using bootstrap@next downgrade to [email protected] beta version available on npm

You can add ngbootstrap by using the command

ng add @ng-bootstrap/schematics by adding schematics it will add necessory import to angular.json file.