Uncaught TypeError: Bootstrap's dropdowns require Popper.js when click on button group button-CodePudding

I have used this code in my mvc

<div  role="group">
   <button id="btnGroupDrop1" type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
   </button>
   <div  aria-labelledby="btnGroupDrop1">
        <a  href="#">Dropdown link</a>
        <a  href="#">Dropdown link</a>
   </div>
</div>

I have these as the header section

but when I click on the button it does not open, and I get this error in console section of the browser

dropdown.js:154 ,
Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)

can anyone help me with this error

CodePudding user response：

You might need to add popper.js script, to get the bootstrap working well. Add this between your <head> tag in HTML.

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

It's important that you include them in this exact order.

<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4 1nzFpr53nxSS GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>