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
Terminal:
npm i bootstrap
$ yarn add BootstrapCode:
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<head>
</head>
<body>
<h1>LearnShareIT Title</h1>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>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:
Terminal:
Bootstrap 4.0:
npm install [email protected]^1.12.3 --saveBootstrap 4.1:
npm install [email protected]^1.14.3 --saveOr you can use the CDN link to popper.js.
Code:
<script src="https://cdn.jsdelivr.net/npm/[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.
Code:
bundles.Add(newScriptBundle(“~/bundles/bootstrap”).Include(“~/Scripts/bootstrap.js”));Edit it to become the following code.
Code:
bundles.Add(newScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.bundle.min.js"));I hope the above works for your code.
Summary
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:
Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.
Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs
