[twitter-bootstrap] How to install popper.js with Bootstrap 4?

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?

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 [email protected] --save

Then I had a high severity vulnerability message when installing [email protected] 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!

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');

Here is a work-around:

1. Create a js directory in the same directory as your index.html
2. 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

2. 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.

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

npm install [email protected] --save
npm install popper.js@^1.12.9 --save

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

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)

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

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.

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>

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 [email protected] --save
• Install Bootstrap: npm install [email protected] --save

For Bootstrap 4.1

• npm install popper.js@^1.14.3 --save
• npm install [email protected] --save
• npm install [email protected] --save