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
