> For the complete documentation index, see [llms.txt](https://angularactivity.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://angularactivity.gitbook.io/project/angular-7-bootstrap-4.md).

# Angular 7 - Bootstrap 4

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

![Angular 7 - Bootstrap 4](https://3664850746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LOwWulv1WImTywA9fkU%2F-LOwa76_3KrgJ_qPvmjn%2F-LOwaU43xzfH1FYNPDQ-%2FA7-Bootstrap4.png?alt=media\&token=35d1e4c1-2b6b-4f4e-92a9-106bfedafcb2)

🎬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&#x20;

```
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&#x20;

* Launch the application:

```
ng serve -o
```

![](https://3664850746-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LOwWulv1WImTywA9fkU%2F-LOwczaX41ZSpO06DIkk%2F-LOwdGCXO31qH7cr8drP%2F1_YFiJ8TZXQiXYBYObHVeoSA.png?alt=media\&token=79c91e64-bf9e-4b10-8838-aa58088340a7)