{"id":2188,"date":"2017-09-07T23:03:24","date_gmt":"2017-09-07T17:33:24","guid":{"rendered":"http:\/\/fellowtuts.com\/?p=2188"},"modified":"2018-07-24T23:15:13","modified_gmt":"2018-07-24T17:45:13","slug":"use-individual-javascript-plugin-bootstrap","status":"publish","type":"post","link":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/","title":{"rendered":"How to Use Individual JavaScript Plugin in Bootstrap"},"content":{"rendered":"<p>You can use individual JavaScript\u00a0plugin in Bootstrap framework also, rather using whole Bootstrap JS file built on jQuery. Once I had need to include only <code>Navbar<\/code>\u00a0component which depends on <code>Collapse<\/code> JavaScript plugin\u00a0from Bootstrap.<\/p>\n<p>So after reading <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/getting-started\/javascript\/\" target=\"_blank\" rel=\"noopener\">Bootstrap JavaScript documentation<\/a>, 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.<\/p>\n<p>So here I described how can you save page size by opting necessary files only to perform a few behaviors using their jQuery Plugin.<\/p>\n<p>Also read: create <a href=\"http:\/\/fellowtuts.com\/twitter-bootstrap\/mega-menu-multi-column-container-bootstrap-nav-dropdown\/\" target=\"_blank\" rel=\"noopener\">Mega Menu in Bootstrap 4<\/a>.<\/p>\n<h3>Use Individual JavaScript Plugin<\/h3>\n<p>As I said, I had to use only <code>Navbar<\/code> 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).<\/p>\n<ul>\n<li>jQuery<\/li>\n<li>Popper JS<\/li>\n<li>util-js<\/li>\n<li>collapse-js<\/li>\n<li>dropdown-js<\/li>\n<\/ul>\n<h4>Why these\u00a0Bootstrap\u00a0Plugins?<\/h4>\n<p>Well, the answer is in Bootstrap. As expected jQuery must be included first, nothing strange. Just from the documentation:<\/p>\n<p><span style=\"background-color: #ededed;\"><em>\u00a0While we use jQuery\u2019s slim build in our docs, the full version is also supported.\u00a0<\/em><\/span><\/p>\n<p>In short if you don&#8217;t need AJAX and some effects\/animations, you can include less sized slim build else include full version of jQuery.<\/p>\n<p>Also I&#8217;m writing this article when Beta 4.0 version of Bootstrap was out. So at this time <code>popper.js<\/code> was needed to include to let JavaScript in my page to work. Stable release might omit this.<\/p>\n<p>The <code>collapse-js<\/code> is the main plugin to toggle menu and <code>dropdown-js<\/code> JavaScript plugin included to \u00a0open dropdown sub-menu on parent menu item click. Check article, <a href=\"http:\/\/fellowtuts.com\/twitter-bootstrap\/2-ways-for-hover-dropdown-in-bootstrap-3-navbar\/\" target=\"_blank\" rel=\"noopener\">2 Ways for Hover Dropdown in Bootstrap Navbar<\/a> if you wish to open menu on hover rather click.<\/p>\n<p><code>util-js<\/code> includes utility functions and a basic helper for <code>transitionEnd<\/code> events as well as a CSS transition emulator. It\u2019s used by the other plugins to check for CSS transition support and to catch hanging transitions.<\/p>\n<p>All Bootstrap JavaScript depend on <code>util-js<\/code> and it has to be included alongside the other JS files. While using compiled or minified <code>bootstrap.js<\/code>, there is no need to include this. But in individual case, now it&#8217;s required to include before any other JS plugin and after jQuery.<\/p>\n<h3>Bootstrap\u00a0Individual JavaScript Plugin &#8211; Code<\/h3>\n<p>So finally you would need to identify which plugin file you need along with it&#8217;s dependency. You would need to download source files to include plugin separately. There, you can find all individual plugins under `js &gt; dist` folder. My final code would look like:<\/p>\n<pre class=\"lang:default decode:true\" title=\"Use Individual JavaScript Plugin in Bootstrap\">&lt;!--jQuery first--&gt;\r\n&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.2.1.min.js\" integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr\/rE9\/Qpg6aAZGJwFDMVNA\/GpGFF93hXpG5KkN\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!--Popper JS (as per version 4.0 Beta)--&gt;\r\n&lt;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\"&gt;&lt;\/script&gt;\r\n\r\n&lt;!--Assume all my Bootstrap JavaScript resource files reside in bootstrap\/js\/dist folder--&gt;\r\n&lt;script src=\"mydomain.com\/bootstrap\/js\/dist\/util.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"mydomain.com\/bootstrap\/js\/dist\/collapse-js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"mydomain.com\/bootstrap\/js\/dist\/dropdown.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>So it&#8217;s how you can\u00a0use 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 &amp; share your feedback or Bootstrap related questions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can use individual JavaScript\u00a0plugin in Bootstrap framework also, rather using whole Bootstrap JS file built on jQuery. Once I had need to include only Navbar\u00a0component which depends on Collapse JavaScript plugin\u00a0from Bootstrap.<\/p>\n<p class=\"text-right mb-0\"><a class=\"btn btn-outline-primary\" href=\"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/\">Read More<\/a><\/p>","protected":false},"author":3,"featured_media":2204,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[20,83],"tags":[57,44,64,32],"class_list":["post-2188","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","category-bootstrap","tag-concepts","tag-javascript","tag-responsive","tag-toggle"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Use Individual JavaScript Plugin in Bootstrap<\/title>\n<meta name=\"description\" content=\"You can use individual JavaScript\u00a0plugin in Bootstrap framework, instead of whole Bootstrap JS file built on jQuery. Required individual JavaScript plugin\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Individual JavaScript Plugin in Bootstrap\" \/>\n<meta property=\"og:description\" content=\"You can use individual JavaScript\u00a0plugin in Bootstrap framework, instead of whole Bootstrap JS file built on jQuery. Required individual JavaScript plugin\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"Fellow Tuts\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FellowTuts\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-07T17:33:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-07-24T17:45:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fellowtuts.com\/wp-content\/uploads\/2017\/09\/use-individual-javascript-plugin-bootstrap.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1146\" \/>\n\t<meta property=\"og:image:height\" content=\"376\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Amit Sonkhiya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SonkhiyaAmit\" \/>\n<meta name=\"twitter:site\" content=\"@fellowtuts\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amit Sonkhiya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Individual JavaScript Plugin in Bootstrap","description":"You can use individual JavaScript\u00a0plugin in Bootstrap framework, instead of whole Bootstrap JS file built on jQuery. Required individual JavaScript plugin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Individual JavaScript Plugin in Bootstrap","og_description":"You can use individual JavaScript\u00a0plugin in Bootstrap framework, instead of whole Bootstrap JS file built on jQuery. Required individual JavaScript plugin","og_url":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/","og_site_name":"Fellow Tuts","article_publisher":"https:\/\/www.facebook.com\/FellowTuts\/","article_published_time":"2017-09-07T17:33:24+00:00","article_modified_time":"2018-07-24T17:45:13+00:00","og_image":[{"width":1146,"height":376,"url":"https:\/\/fellowtuts.com\/wp-content\/uploads\/2017\/09\/use-individual-javascript-plugin-bootstrap.jpg","type":"image\/jpeg"}],"author":"Amit Sonkhiya","twitter_card":"summary_large_image","twitter_creator":"@SonkhiyaAmit","twitter_site":"@fellowtuts","twitter_misc":{"Written by":"Amit Sonkhiya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#article","isPartOf":{"@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/"},"author":{"name":"Amit Sonkhiya","@id":"https:\/\/fellowtuts.com\/#\/schema\/person\/b9570d93920c6122e8d31c5827a3c494"},"headline":"How to Use Individual JavaScript Plugin in Bootstrap","datePublished":"2017-09-07T17:33:24+00:00","dateModified":"2018-07-24T17:45:13+00:00","mainEntityOfPage":{"@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/"},"wordCount":483,"commentCount":0,"image":{"@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/fellowtuts.com\/wp-content\/uploads\/2017\/09\/use-individual-javascript-plugin-bootstrap.jpg","keywords":["Concepts","JavaScript","Responsive","Toggle"],"articleSection":["jQuery","Tw. Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/","url":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/","name":"How to Use Individual JavaScript Plugin in Bootstrap","isPartOf":{"@id":"https:\/\/fellowtuts.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/fellowtuts.com\/wp-content\/uploads\/2017\/09\/use-individual-javascript-plugin-bootstrap.jpg","datePublished":"2017-09-07T17:33:24+00:00","dateModified":"2018-07-24T17:45:13+00:00","author":{"@id":"https:\/\/fellowtuts.com\/#\/schema\/person\/b9570d93920c6122e8d31c5827a3c494"},"description":"You can use individual JavaScript\u00a0plugin in Bootstrap framework, instead of whole Bootstrap JS file built on jQuery. Required individual JavaScript plugin","breadcrumb":{"@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#primaryimage","url":"https:\/\/fellowtuts.com\/wp-content\/uploads\/2017\/09\/use-individual-javascript-plugin-bootstrap.jpg","contentUrl":"https:\/\/fellowtuts.com\/wp-content\/uploads\/2017\/09\/use-individual-javascript-plugin-bootstrap.jpg","width":"1146","height":"376","caption":"Use Individual JavaScript Plugin in Bootstrap"},{"@type":"BreadcrumbList","@id":"https:\/\/fellowtuts.com\/bootstrap\/use-individual-javascript-plugin-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fellowtuts.com\/"},{"@type":"ListItem","position":2,"name":"Tw. Bootstrap","item":"https:\/\/fellowtuts.com\/bootstrap\/"},{"@type":"ListItem","position":3,"name":"How to Use Individual JavaScript Plugin in Bootstrap"}]},{"@type":"WebSite","@id":"https:\/\/fellowtuts.com\/#website","url":"https:\/\/fellowtuts.com\/","name":"Fellow Tuts","description":"Application Development &amp; Informative Tutorials by Fellow Tuts","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fellowtuts.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/fellowtuts.com\/#\/schema\/person\/b9570d93920c6122e8d31c5827a3c494","name":"Amit Sonkhiya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fellowtuts.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d92d9ad9c56711a79f1a10988743adb3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d92d9ad9c56711a79f1a10988743adb3?s=96&d=mm&r=g","caption":"Amit Sonkhiya"},"description":"Entrepreneur, multiple programming skills and technology lover.","sameAs":["https:\/\/x.com\/SonkhiyaAmit"],"url":"https:\/\/fellowtuts.com\/author\/amit\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/fellowtuts.com\/wp-content\/uploads\/2017\/09\/use-individual-javascript-plugin-bootstrap.jpg","jetpack_shortlink":"https:\/\/wp.me\/p4hwPY-zi","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/posts\/2188","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/comments?post=2188"}],"version-history":[{"count":0,"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/posts\/2188\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/media\/2204"}],"wp:attachment":[{"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/media?parent=2188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/categories?post=2188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fellowtuts.com\/wp-json\/wp\/v2\/tags?post=2188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}