How to install popper.js with Bootstrap 4?

Question

From what I've read so far, popper.js is a big pain with Bootstrap 4. I can't get it to work. I keep getting this error:

Error: Bootstrap dropdown require Popper.js (https://popper.js.org)

I've tried the CDN and NPM install. Same result. At the bottom of my HTML file, I have this for the NPM install:

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Then tried this for the CDN:

<script src="/js/jquery.min.js"></script>
<script src="/js/tether.min.js"></script>
<script src="https://cdnjs.com/libraries/popper.js"></script>
<script src="/js/bootstrap.min.js"></script>

Any ideas what I'm doing wrong?

Are you getting any JavaScript related errors when you inspect your code? See also: http://getbootstrap.com/docs/4.0/getting-started/introduction/ — Robert, Oct 31 '17 at 16:39
@RobertC: The CDN from that link seems to fix this issue. I guess at least for bs4, you need Popper 1.12.3 and not 1.12.6 (NPM version). — 4thSpace, Oct 31 '17 at 16:42
Just go to the [Bootstrap home page](https://getbootstrap.com/) and copy/paste the CDN entries for script and CSS. — scottrudy, Mar 28 '20 at 16:55

Jobayer Ahmmed · Answer 1 · 2018-06-03T10:04:08.360

83

Bootstrap 4 has two dependencies: jQuery 1.9.1 and popper.js 1.12.3. When you install Bootstrap 4, you need to install these two dependencies.

Install popper.js: npm install popper.js@^1.12.3 --save
Install jQuery: npm install jquery@1.9.1 --save
Install Bootstrap: npm install bootstrap@4.0.0-beta.2 --save

For Bootstrap 4.1

npm install popper.js@^1.14.3 --save
npm install jquery@3.3.1 --save
npm install bootstrap@4.1.1 --save

edited Jun 03 '18 at 10:04

answered Nov 24 '17 at 09:22

Jobayer Ahmmed

1,856
3
16
20

1

I could of swore I can across a post that allows you to do a one-line action with all three packages....I can't find it darn! – klewis Apr 13 '18 at 14:40
1

I have installed popper with npm, but it's still referenced from the bootstrap folder: ERROR in ./~/bootstrap/dist/js/bootstrap.js Module not found: Error: Can't resolve 'popper.js' in 'D:\Code\MyApp\node_modules\bootstrap\dist\js' @ ./~/bootstrap/dist/js/bootstrap.js 7:101-121 @ ./ClientApp/boot.ts @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts – Adrian Rosca Aug 30 '18 at 20:21
I changed version only for jQureey and Popper and working well with Bootstrap 4 `npm install popper.js@^1.12.9 --save ` `npm install jquery@3.2.1 --save ` `npm install bootstrap@4.0.0 --save ` – mikia Aug 31 '18 at 10:14
2

There is another packet called popper and I always get confused between them. – Dec 20 '18 at 15:24
1

Add the script files in angular.json file under scripts array as mentioned below. Please note that order of the script files is important and you need to use the umd version of popper js. : =============== >>>>> "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] – Rakeshk Khanapure May 24 '19 at 20:50

score 27 · Accepted Answer · answered Oct 31 '17 at 17:52

27

https://cdnjs.com/libraries/popper.js does not look like a right src for popper, it does not specify the file

with bootstrap 4 I am using this

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

and it is working perfectly fine, give it a try

answered Oct 31 '17 at 17:52

Sam Hajari

354
4
10

it works. can you explain what is the difference between them? – Si7ius Dec 18 '18 at 05:40
This: should refer to a ".js" file. What he has takes you to a web page with different versions of popper.js instead. Copy the link and paste it in your browser and you'll see the page. Hope that helps – Sam Hajari Jan 08 '19 at 15:14

score 25 · Answer 3 · edited Apr 13 '18 at 23:05

25

Try doing this:

npm install bootstrap jquery popper.js --save

See this page for more information: how-to-include-bootstrap-in-your-project-with-webpack

edited Apr 13 '18 at 23:05

Artemis

2,553
7
21
36

answered Apr 13 '18 at 21:00

Pawel Nieradka

261
3
6

Work for me, but adding specific version. – racar Oct 01 '18 at 20:11

Chris · Answer 4 · 2020-01-29T16:41:07.890

Two different ways I got this working.

Option 1: Add these 3 <script> tags to your .html file, just before the closing </body> tag:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Option 2 (Option 2 works with Angular, not sure about other frameworks)

Step 1: Install the 3 libraries using NPM:

npm install bootstrap --save

npm install popper.js --save

npm install jquery --save

Step 2: Update the script: array(s) in your angular.json file like this:

"scripts": ["node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"]

(thanks to @rakeshk-khanapure above in the comments)

I tried this because I like the angular.json solution. This does not work for me. Dropdown button does not work :/ Using Angular 12.2.11 — jksevend, Oct 25 '21 at 17:27

score 7 · Answer 5 · edited Mar 29 '19 at 10:29

I had problems installing it Bootstrap as well, so I did:

Install popper.js: npm install popper.js@^1.12.3 --save

Install jQuery: npm install jquery@1.9.1 --save

Then I had a high severity vulnerability message when installing jquery@1.9.1 and got this message:

run npm audit fix to fix them, or npm audit for details

So I did npm audit fix, and after another npm audit fix --force it successfully installed!

score 5 · Answer 6 · answered Jun 19 '20 at 15:51

npm install bootstrap jquery --save

You don't have to install popper.js with npm as it comes with npm Bootstrap in bootstrap.bundle.js.

Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.

Source to Verify: Link

Now you only have to do this in your HTML file:

<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

score 3 · Answer 7 · answered Aug 22 '18 at 17:57

3

Pawel and Jobayer has already mentioned about how to install popper.js through npm.

If you are using front-end package manager like bower. use the following command

bower install popper.js --save

answered Aug 22 '18 at 17:57

hackwithharsha

901
1
16
39

score 3 · Answer 8 · answered Apr 22 '20 at 17:37

3

It's simple you can Visit this, And save the file as popper.min.js

then import it.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import 'bootstrap/dist/js/popper.min.js';
global.jQuery = require('jquery');
require('bootstrap');

answered Apr 22 '20 at 17:37

novice programmer

128
3

1

I think this is simple, Though i am not using it this way :) – Ayemun Hossain Ashik Apr 22 '20 at 17:39
1

As you wish bro. But it's simple – novice programmer Apr 22 '20 at 17:40

kmiklas · Answer 9 · 2018-09-19T20:07:18.413

Here is a work-around:

Create a js directory in the same directory as your index.html
Download popper.min.js from the following site into said js directory https://github.com/FezVrasta/popper.js#installation

e.g.: https://unpkg.com/popper.js/dist/umd/popper.min.js

Change your the src of your script include to look like this:

src="js/popper.min.js"

Note that you've removed Popper from npm version control, so you'll have to manually download updates.

score 0 · Answer 10 · answered May 10 '20 at 16:46

0

I have the same problem while learning Node.js Here is my solution for it to install jquery

npm install jquery@1.9.1 --save
npm install popper.js@^1.12.9 --save

answered May 10 '20 at 16:46

score -1 · Answer 11 · answered Jan 28 '20 at 11:19

Instead of remotely putting popper js from CDN you can directly install it in your angular project.

Try this.

npm install popper.js --save

This query installs an updated version of popper.js Don't mention any version there, it will work for you.

How to install popper.js with Bootstrap 4?

11 Answers11

Linked