You can use individual JavaScript plugin in Bootstrap framework also, rather using whole Bootstrap JS file built on jQuery. Once I had need to include only Navbar component which depends on Collapse JavaScript plugin from Bootstrap.
So after reading Bootstrap JavaScript documentation, I came to know that I can reduce my page size more by including only necessary JS files which is even lesser than minified Bootstrap JS. Surprisingly, there is no article available on internet to let beginner understand how to use individual JavaScript plugin from Bootstrap.
So here I described how can you save page size by opting necessary files only to perform a few behaviors using their jQuery Plugin.
Also read: create Mega Menu in Bootstrap 4.
Use Individual JavaScript Plugin
As I said, I had to use only Navbar for a responsive navigation menu which toggles at a certain breakpoint. So I included only the following JavaScript files in given order as directed by Bootstrap (from version 4.0 Beta).
- jQuery
- Popper JS
- util-js
- collapse-js
- dropdown-js
Why these Bootstrap Plugins?
Well, the answer is in Bootstrap. As expected jQuery must be included first, nothing strange. Just from the documentation:
While we use jQuery’s slim build in our docs, the full version is also supported.
In short if you don’t need AJAX and some effects/animations, you can include less sized slim build else include full version of jQuery.
Also I’m writing this article when Beta 4.0 version of Bootstrap was out. So at this time popper.js was needed to include to let JavaScript in my page to work. Stable release might omit this.
The collapse-js is the main plugin to toggle menu and dropdown-js JavaScript plugin included to open dropdown sub-menu on parent menu item click. Check article, 2 Ways for Hover Dropdown in Bootstrap Navbar if you wish to open menu on hover rather click.
util-js includes utility functions and a basic helper for transitionEnd events as well as a CSS transition emulator. It’s used by the other plugins to check for CSS transition support and to catch hanging transitions.
All Bootstrap JavaScript depend on util-js and it has to be included alongside the other JS files. While using compiled or minified bootstrap.js, there is no need to include this. But in individual case, now it’s required to include before any other JS plugin and after jQuery.
Bootstrap Individual JavaScript Plugin – Code
So finally you would need to identify which plugin file you need along with it’s dependency. You would need to download source files to include plugin separately. There, you can find all individual plugins under `js > dist` folder. My final code would look like:
<!--jQuery first--> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!--Popper JS (as per version 4.0 Beta)--> <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> <!--Assume all my Bootstrap JavaScript resource files reside in bootstrap/js/dist folder--> <script src="mydomain.com/bootstrap/js/dist/util.js"></script> <script src="mydomain.com/bootstrap/js/dist/collapse-js"></script> <script src="mydomain.com/bootstrap/js/dist/dropdown.js"></script>
So it’s how you can use individual JavaScript plugin in Bootstrap. Further you can also use all these Bootstrap Plugins code by putting in one single JavaScript file and minify then. Comment & share your feedback or Bootstrap related questions.