Search code examples

Bootstrap 5 dropdown is not working on Angular 12

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.


  • 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 bootstrap@5
    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 bootstrap@5

    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