Angular 4: How to include Bootstrap?

npm install --save bootstrap

afterwards, inside angular-cli.json (inside the project's root folder), find styles and add the bootstrap css file like this:

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

UPDATE:
in angular 6+ angular-cli.json was changed to angular.json.

Watch Video or Follow the step

Install bootstrap 4 in angular 2 / angular 4 / angular 5 / angular 6

There is three way to include bootstrap in your project
1) Add CDN Link in index.html file
2) Install bootstrap using npm and set path in angular.json Recommended
3) Install bootstrap using npm and set path in index.html file

I recommended you following 2 methods that are installed bootstrap using npm because its installed in your project directory and you can easily access it

Method 1

Add Bootstrap, Jquery and popper.js CDN path to you angular project index.html file

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Method 2

1) Install bootstrap using npm

npm install bootstrap --save

after the installation of Bootstrap 4, we Need two More javascript Package that is Jquery and Popper.js without these two package bootstrap is not complete because Bootstrap 4 is using Jquery and popper.js package so we have to install as well

2) Install JQUERY

npm install jquery --save

3) Install Popper.js

npm install popper.js --save

Now Bootstrap is Install on you Project Directory inside node_modules Folder

open angular.json this file are available on you angular directory open that file and add the path of bootstrap, jquery, and popper.js files inside styles[] and scripts[] path see the below example

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

Note: Don't change a sequence of js file it should be like this

Method 3

Install bootstrap using npm follow Method 2 in method 3 we just set path inside index.html file instead of angular.json file

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Now Bootstrap Working fine Now

In order to configure/integrate/use Bootstrap in angular, first we need to install Bootstrap package using npm.

Install package

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific versionor$ npm install bootstrap --save   // for latest version

Note: --save command will save the dependency in our angular app inside package.json file.

Now that we have the package installed with above step, now we can tell Angular CLI that it needs to load these styles by using any of the below options or both:

option 1) Adding into the file src/styles.css

we can add the dependencies as shown below:

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

Option 2) Adding into angular-cli.json or angular.json

We can add the style css files into angular-cli.json or angular.json file which is at root folder of our angular app as shown below:

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