Angular 7 - Bootstrap 4

In this article, we'll see how to setup bootstrap 4 in Angular 7.

Angular 7 - Bootstrap 4

🎬Video version: https://www.youtube.com/watch?v=8Onby_SVIHc

Step 0

Installing angular-cli

Note: you can skip this part if you already have application generated

sudo npm i -g @angular/cli@next
ng new angular7app
cd angular7app

Step 1

• Install ngx-bootstrap and bootstrap

  npm install ngx-bootstrap bootstrap --save

Step 2

• Open src/app/app.module.ts and add:

import { AlertModule } from 'ngx-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ...
})

Step 3

• Open angular.json and insert a new entry into the styles array:

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

Step 4

• Open src/app/app.component.html and add:

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

Step 5

• Launch the application:

ng serve -o