How to use Bootstrap in an Angular project?

Provided you use the Angular-CLI to generate new projects, there's another way to make bootstrap accessible in Angular 2/4.

1. Via command line interface navigate to the project folder. Then use npm to install bootstrap:
   $ npm install --save bootstrap. The --save option will make bootstrap appear in the dependencies.
2. Edit the .angular-cli.json file, which configures your project. It's inside the project directory. Add a reference to the "styles" array. The reference has to be the relative path to the bootstrap file downloaded with npm. In my case it's: "../node_modules/bootstrap/dist/css/bootstrap.min.css",

My example .angular-cli.json:

{  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  "project": {    "name": "bootstrap-test"  },  "apps": [    {      "root": "src",      "outDir": "dist",      "assets": [        "assets",        "favicon.ico"      ],      "index": "index.html",      "main": "main.ts",      "polyfills": "polyfills.ts",      "test": "test.ts",      "tsconfig": "tsconfig.app.json",      "testTsconfig": "tsconfig.spec.json",      "prefix": "app",      "styles": [        "../node_modules/bootstrap/dist/css/bootstrap.min.css",        "styles.css"      ],      "scripts": [],      "environmentSource": "environments/environment.ts",      "environments": {        "dev": "environments/environment.ts",        "prod": "environments/environment.prod.ts"      }    }  ],  "e2e": {    "protractor": {      "config": "./protractor.conf.js"    }  },  "lint": [    {      "project": "src/tsconfig.app.json"    },    {      "project": "src/tsconfig.spec.json"    },    {      "project": "e2e/tsconfig.e2e.json"    }  ],  "test": {    "karma": {      "config": "./karma.conf.js"    }  },  "defaults": {    "styleExt": "css",    "component": {}  }}

Now bootstrap should be part of your default settings.

An integration with Angular2 is also available through the ng2-bootstrap project : https://github.com/valor-software/ng2-bootstrap.

To install it simply put these files in your main HTML page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Then you can use it into your components this way:

import {Component} from 'angular2/core';import {Alert} from 'ng2-bootstrap/ng2-bootstrap';@Component({  selector: 'my-app',  directives: [Alert],  template: `<alert type="info">ng2-bootstrap hello world!</alert>`})export class AppComponent {}

All you need to do is include the boostrap css within your index.html file.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">