Question: Since version 5 **Bootstrap** framework has removed **jQuery** as a requirement.

**I want to know how this change affects the Angular application?**

Can we use all provided Bootstrap functionalities in Angular (for example dropdowns)?

I know that Angular shouldn't be combined with JQuery - in earlier versions of Bootstrap, JQuery was recommened to import if we want to use all bootstrap functionalities and it was bad.

But Bootstrap 5 doesn't rely on JQuery anymore so is it safe to use it with my Angular applications?

As for now I don't want to use bootstrap alternatives like ng-bootstrap, that is why I'm asking is it okay and **safe** to use Bootstrap 5 in Angular?

Answer: 
Yes, you can use it now. You can use it by installing with npm as well as by including the CDN links in your project.

```html
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

```

You can also check the implementation of the bootstrap 5 in angular 11 here. - <https://www.c-sharpcorner.com/article/add-bootstrap-5-in-angular-11/>
You first need to install the Node Package Manager
==================================================

You then install Bootstrap in your project using your IDE's Terminal. In Visual Studio code this can be brought up by clicking CTRL + ` or going to the View Menu.

You then install Bootstrap 5 in your project with the following command.

`npm install bootstrap@next`

You then have to import that package so that Angular is aware of it. You do this by adding the necessary directives in the Angular.json file.

[![angular.json file](https://i.stack.imgur.com/m0sHW.jpg)](https://i.stack.imgur.com/m0sHW.jpg)

You then add the following path to the CSS.

`"./node_modules/bootstrap/dist/css/bootstrap.min.css",`

And the following to the JS

`"./node_modules/bootstrap/dist/js/bootstrap.min.js"`

You can then also add the popper JS.
------------------------------------

Using the following NPM command you can add popper.js to your project.

`npm install @popperjs/core`

Then also adding the directive to your angular.json file

`"./node_modules/@popperjs/core/dist/umd/popper.min.js"`

So that your angular.json file looks like this.

[![Angular.json complete](https://i.stack.imgur.com/J9Gop.jpg)](https://i.stack.imgur.com/J9Gop.jpg)