Bootstrap 4 components, powered by Angular

1: Installing Bootsrap

Next, we need to install Bootstrap. Change the directory to the project we created (cd angular-bootstrap-example) and execute the following command:

For Bootstrap 3:

npm install bootstrap --save

For Bootstrap 4 (currently in beta):

npm install bootstrap@next --save

2: Importing the CSS

We have two options to import the CSS from Bootstrap that was installed from NPM:

1: Configure .angular-cli.json:

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

2: Import directly in src/style.css or src/style.scss:

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

I personally prefer to import all my styles in src/style.css since it’s been declared in .angular-cli.json already.

3: Using Bootstrap with ng-bootstrap (Bootstrap v4)

There is also a second option to use Bootstrap JavaScript components in Angular without JQuery in case you are using Bootstrap 4: ng-bootstrap.

You can install ng-bootstrap in your project from NPM:

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

In your app.module.ts you need to import the NgbModule.forRoot() using the forRoot() method.

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

@NgModule({
  imports: [ NgbModule.forRoot(), ... ],  
  // ...
})
export class AppModule {}

Setup bootstrap Here : https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/
Use the bootstrap component here: https://ng-bootstrap.github.io/#/getting-started