Bootstrap Dropdown Require Popper.js Error In JavaScript – How To Fix It?

Bootstrap dropdown require Popper.js Error in JavaScript

Why does the error “Bootstrap dropdown require Popper.js” in JavaScript occurs and how to fix it? In this article, we will answer that question and give you some solutions to solve this error. Let’s check it out!

Bootstrap library

Bootstrap was born and published on GitHub in August 2011. We understand it as a library that includes built-in StyleSheets in files located in the folder of Bootstrap. And our work is to understand it, remember the names of the built-in styles and “fabric” the interface. You should use Bootstrap. It’s simply an inbuilt library, so using it will help you quickly develop your website. It is simple because it is written in HTML, CSS, and Javascript, so you only need to have basic knowledge of those 3 to use Bootstrap well. 

Useful Responsive Features: Bootstrap has built-in responsive CSS on mobiles, tablets, and desktops, so you won’t have to waste time writing messy CSS. Browser compatibility: It is compatible with all browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera).

How to install Bootstrap

There are some common ways to use Bootstrap:

  • Loaded directly from the Bootstrap provisioning page
  • Via Bootstrap CDN
  • Install Bootstrap by npm or yarn 


npm i bootstrap
$ yarn add Bootstrap


<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <h1>LearnShareIT Title</h1>
    <script src=""></script>
    <script src="js/bootstrap.min.js"></script>

So you have installed Bootstrap and can use it in your software.

What causes “Bootstrap dropdown require Popper.js” error in JavaScript?

As well as the error message displayed, we know that this error is caused when you add the bootstrap dropdown. You don’t have the Popper.js file in the program. The above error can occur due to one of two reasons below:

  • You can go in the wrong direction due to the console error. It MAY NOT be the main problem. The order in which your.js files are set to load was the first factor for me.
  • The second consideration is whether the.js files are in the header or footer. You can fix the problem by moving them to the footer.

Some solutions to solve this error

Install file Popper.js in Bootstrap 

This way, you can add the Popper.js file to your project and use it in the project. Here’s how to install versions 4.0 and 4.1 with the npm command:


Bootstrap 4.0:

npm install [email protected]^1.12.3 --save

Bootstrap 4.1:

npm install [email protected]^1.14.3 --save

Or you can use the CDN link to popper.js.


<script src="[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

You can apply this method to correct errors in the article, or you can use the method below. Follow us

Change Bundle Config

In this solution, you will modify the package’s configuration in the bootstrap library. First, you must open the BundleConfig.cs file in the library folder and edit the following code.



Edit it to become the following code.



I hope the above works for your code.


To summarize, we have many solutions to solve “Bootstrap dropdown require Popper.js” error in JavaScript. After reading this article, we know some ways to solve it, like Installing the file Popper.js in Bootstrap or changing Bundle Config in Javascript

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *