Solution 1 :

According to Bootstrap 5 (Separate section), Bootstrap 5 requires @popperjs/core but not popperjs. Hence you were installing and importing the wrong library.

FYI, Bootstrap 5 removed dependency on jQuery.

Solution 1: Install @popperjs/core

Pre-requisite: You have installed Bootstrap 5 with

npm install [email protected]
  1. You are required to install @popperjs/core as dependencies. Via npm
npm install @popperjs/core
  1. Import @popperjs/core into angular.json. Popper (library) must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.


"scripts": [

Solution 2: Import Bootstrap as bundle

Pre-requisite: You have installed Bootstrap 5 with

npm install [email protected]

Bootstrap bundle includes Popper for our tooltips and popovers. Hence you no need to install @popperjs/core separately.

  1. Import the Bootstrap bundle to the angular.json scripts array.


"scripts": [

Solution 3: Angular Bootstrap

Angular Bootstrap Dropdown is another option that makes Bootstrap works in Angular App.

  1. Install Angular Bootstrap (NG Bootstrap).
npm install @ng-bootstrap/ng-bootstrap
  1. Add NgbModule into app.module.ts imports section.
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

  imports: [.., NgbModule]
  1. Apply Angular Bootstrap Dropdown directive.
<div ngbDropdown class="dropdown">
  <button ngbDropdownToggle class="btn btn-secondary" type="button" id="dropdownMenuButton1" aria-expanded="false">
Dropdown button
  <ul ngbDropdownMenu aria-labelledby="dropdownMenuButton1">
    <li><a ngbDropdownItem href="#">Action</a></li>
    <li><a ngbDropdownItem href="#">Another action</a></li>
    <li><a ngbDropdownItem href="#">Something else here</a></li>

Sample Solution 3 on StackBlitz

Solution 2 :

Add data-bs-toggle="dropdown" to a link or button to toggle a dropdown

See the bootstrap documentation to more information.

Problem :

I’m trying to add the Bootstrap 5 dropdown in Angular 12 it’s not working.

I have installed all the necessary packages, added them to the angular.json file.

Copied the exact example from Bootstrap 5 docs still not working.

In angular.json I have given

"styles": [
"scripts": [

Below is my HTML code (same as in Bootstrap 5 docs)

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data- 
bs-toggle="dropdown" aria-expanded="false">
Dropdown button
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>

I used the command npm i to install the packages without mentioning any version name so I guess the latest version was installed. Installed jQuery as the last resort read somewhere Bootstrap 5 doesn`t require jQuery. Any help is greatly appreciated.


Comment posted by gauthaman vijayan

only the third solution worked . when i installed poper core it showed an error and clicked on the dropdown button (both solution 1 and 2 ) it showed

Comment posted by gauthaman vijayan

solution 2 too didnt work. Only ngb Module is working

Comment posted by Emre

Solution 3 is OK.

Comment posted by Leandro

Solution 1 for me worked. To work that give build before. If you are on run time and make these changes it will not work.

Comment posted by Richard Turner

You must include the Javascript libraries in the order above (Option 1)

Comment posted by Bill Gardner

I don’t know why this was downvoted, but it was the correct answer for my issue. Specifically, if you are migrating from Bootstrap 4 to Bootstrap 5 this syntax will need to be updated.

Comment posted by Ricky Levi

wow, so many hacks – this is what solved it. only included in my

Comment posted by MacD

This is the correct answer! X3