How to add and use bootstrap and ng-bootstrap in Angular 2 CLI project

Follow the below steps for adding Bootstrap and ng-bootstrap (Bootstrap components, powered by Angular) to an Angular-2 app created using Angular CLI


Add Bootstrap

  1. Goto the project directory and open Command in Windows / terminal in Mac
  2. npm install bootstrap@4.0.0-alpha.6 --save //in Windows
    sudo npm install bootstrap@4.0.0-alpha.6 --save //in Mac
  3. In project root folder, find and open the file ‘angular-cli.json’ in any editor 
  4. Locate the styles[] array and add font-awesome references directory. like:
    "apps": [
    {
    ....
    "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
    ],
    ...
    }
    ]
  5. Use bootstrap snippet in any html file
  6. Run the server by command
    ng serve

Add ng-botstrap (Bootstrap components, powered by Angular)

  1. Goto the project directory and open Command in Windows / terminal in Mac
  2. npm install --save @ng-bootstrap/ng-bootstrap //in Windows
    sudo npm install --save @ng-bootstrap/ng-bootstrap //in Mac
  3. Open src/app/app.module.ts
  4. Import ng-bootstrap main module
    import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  5. Add the imported module in imports array
    @NgModule({
    imports: [NgbModule.forRoot(),...]
    })
  6. Open src/app/app.component.html and use the alert component


    Warning! Better check yourself, you're not looking too good.

  7. Run the server by command
    ng serve
  8. Bootstrap themed alert will be visible now

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.