install bootstrap in angular cli project

bootstrap.md

Install Bootstrap

• Notice: Check the version of Bootstrap by NPM with below command:

  npm view bootstrap dist-tags
  

1. Install Bootstrap in Angular CLI project with a few steps:

• First: Install Bootstrap using NPM:

  npm install bootstrap@next --save //the directive will install beta.3 which will cause error when build
  

  instead of above with below version:

  npm install bootstrap@4.0.0-beta.2 -- save //the version work fine.
  

• Second: Add code to angular-cli.json file in the root as below:

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

  if you install bootstrap 4, your js denpendency will display like below:

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

  you can also import Bootstrap css into styles.css file instead add to angular-cli.json file:

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

  there is an issue can refer this link

• Third: Install ng-bootstrap dependency:

  npm install --save @ng-bootstrap/ng-bootstrap
  

  After installed the dependency:

  1. Add this to your main module class.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  

  2. Include the following in your main module imports section.

  @NgModule({
   imports: [NgbModule.forRoot(), ...],
  })
  

  3. If you are going to use ng-bootstrap components inside your sub module(s) classes.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })
  

Now your project is ready to use available ng-bootstrap components.