How to add bootstrap to an angular-cli project

Looking up for the keyword > Global Library Installation on https://github.com/angular/angular-cli helps you find the answer.

As per their document, you can take the following steps to add the Bootstrap library.

First, install Bootstrap from npm:

npm install bootstrap

Then add the needed script file to apps[0].scripts in the angular.json file:

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

The above step is important for certain functionality to work such as the displaying of the dropdown menu.

Finally add the Bootstrap CSS file to the apps[0].styles array in the angular.json file:

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

Restart ng serve if you're running it, otherwise the changes will not be visible. Bootstrap 4+ should now be working on your app.

Alternative solution: Another solution to add Bootstrap to Angular would be to make use of the ngx-bootstrap project which provides Bootstrap components powered by Angular. Please look at this answer to learn more regarding the use of ngx-boostrap with Angular or the ngx-bootstrap project's own documentation.

Do the following:

npm i bootstrap@next --save

This will add bootstrap 4 to your project.

Next go to your src/style.scss or src/style.css file (choose whichever you are using) and import bootstrap there:

For style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

For style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

For scripts you will still have to add the file in the angular-cli.json file like so (In Angular version 6, this edit needs to be done in the file angular.json):

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

IMPORTANT UPDATE: ng2-bootstrap is now replaced by ngx-bootstrap

ngx-bootstrap supports both Angular 3 and 4.

Update : 1.0.0-beta.11-webpack or above versions

First of all check your angular-cli version with the following command in the terminal:

ng -v

If your angular-cli version is greater than 1.0.0-beta.11-webpack, then you should follow these steps:

1. Install ngx-bootstrap and bootstrap:

   npm install ngx-bootstrap bootstrap --save
   

This line installs Bootstrap 3 nowadays, but can install Bootstrap 4 in the future. Keep in mind ngx-bootstrap supports both versions.

2. Open src/app/app.module.ts and add:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })
   

3. Open angular-cli.json (for angular6 and later file name changed to angular.json ) and insert a new entry into the styles array:

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

4. Open src/app/app.component.html and add:

   <alert type="success">hello</alert>
   

1.0.0-beta.10 or below versions:

And, if your angular-cli version is 1.0.0-beta.10 or below, then you can use below steps.

First, go to the project directory and type:

npm install ngx-bootstrap --save

Then, open your angular-cli-build.js and add this line:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Now, open your src/system-config.ts then write:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...and:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

At first, you have to install tether, jquery and bootstrap with these commands

npm i -S tether
npm i -S jquery
npm i -S [email protected] 

After add these lines in your angular-cli.json (angular.json from version 6 onwards) file

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]