i wanted to ask if Popper.js is absolutely necessary or not if i don't use dropdown menus. Are there any other parts driven by popper that would not work without the library?
Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following <script> s near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
Bootstrap depends on Popper, which is specified in the peerDependencies property. This means that you will have to make sure to add both of them to your package. json using npm install @popperjs/core .
Popper. js is a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element.
If you search for "popper" in Bootstrap 4's documentation, the following results will come up:
Tooltips rely on the 3rd party library Popper.js for positioning.
Popovers rely on the 3rd party library Popper.js for positioning.
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection.
So these are the Bootstrap 4 components that need Popper.js.
Though Popper.js is stated as required for Bootstrap 4, and Bootstrap 4 JS logs an error if it can't find Popper, you can still use Bootstrap 4 JS without Popper, if you don't need tooltips, popovers, dropdowns, nor modals.
For example navbar's JS functionality (mobile menu on the right) works well:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With