Way One - Using ngx-bootstrap

From: https://github.com/valor-software/ngx-bootstrap

---

Using with Bootstrap 4 with angular-cli

create a new project <my-app>

ng new my-app
cd my-app

---

Adding ngx-bootstrap and bootstrap 4

• using npm to install ngx-bootstrap and bootstrap 4 in <my-app> folder
  bootstrap@next is bootstrap 4

projects>my-app> npm install ngx-bootstrap bootstrap@next --save

---

Using with css

Configuring Project

Now that the project is set up it must be configured to include the bootstrap CSS.

• Open the file .angular-cli.json from the root of your project.
• Under the property apps the first item in that array is the default application.
• There is a property styles which allows external global styles to be applied to your application.
• Specify the path to bootstrap.min.css.

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

---

Testing

• open src/app/app.module.ts and add

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

• open src/app/app.component.html and add

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

---

Way Two - Using ng-bootstrap

From: https://ng-bootstrap.github.io/#/home

---