Follow the below steps for adding Bootstrap and ng-bootstrap (Bootstrap components, powered by Angular) to an Angular-2 app created using Angular CLI
- Goto the project directory and open Command in Windows / terminal in Mac
npm install bootstrap@4.0.0-alpha.6 --save //in Windows
sudo npm install bootstrap@4.0.0-alpha.6 --save //in Mac
- In project root folder, find and open the file ‘angular-cli.json’ in any editor
- Locate the styles[] array and add font-awesome references directory. like:
"apps": [
{
....
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
...
}
] - Use bootstrap snippet in any html file
- Run the server by command
ng serve
Add ng-botstrap (Bootstrap components, powered by Angular)
- Goto the project directory and open Command in Windows / terminal in Mac
npm install --save @ng-bootstrap/ng-bootstrap //in Windows
sudo npm install --save @ng-bootstrap/ng-bootstrap //in Mac
- Open src/app/app.module.ts
- Import ng-bootstrap main module
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
- Add the imported module in imports array
@NgModule({
imports: [NgbModule.forRoot(),...]
}) - Open src/app/app.component.html and use the alert component
Warning! Better check yourself, you're not looking too good. - Run the server by command
ng serve
- Bootstrap themed alert will be visible now