Add New third-party plugins

To add a third-party plugin to your project, follow these steps :

Using Node

1. Install node dependency for third-party plugin that you want to add.
2. Create directories within the libs directory to include the plugin's CSS and JS files
3. Add the CSS & JS for the plugin to your HTML file.

For example, if you want to include bootstrap-select plugin, you need to follow this:

1. Install the plugin using the command: npm i bootstrap-select.
2. Create bootstrap-select directory within the libs directory & create plugin related files like :
   • Create below files & import node_module path : bootstrap-select.js & bootstrap-select.scss
   • Optional styles You can define light and dark themes, as well as LTR and RTL-specific styles, within the bootstrap-select.scss file. Refer to the template support for more details.
   Copy

   import 'bootstrap-select/js/bootstrap-select';

   Copy

   @import "../../scss/_bootstrap-extended/include";
   @import "bootstrap-select/sass/bootstrap-select";
   
   // include scss that you want to overwrite
   
   /* Light Theme */
   [data-bs-theme="light"] {
     .bootstrap-select {
       ...
     }
   }
   
   /* Dark Theme */
   @if $enable-dark-mode {
     @include color-mode(dark) {
       .bootstrap-select {
         ...
       }
     }
   }
   
   /* LTR Style */
   :dir(ltr) {
     .bootstrap-select {
       ...
     }
   }
   
   /* RTL Style */
   :dir(rtl) {
     .bootstrap-select {
       ...
     }
   }

3. Start adding third-party plugin CSS & JS in your HTML file.
   Copy

   // Include stylesheet
   <link rel="stylesheet" href="vendor/libs/bootstrap-select/bootstrap-select.css" />
   
   // Include Javascript
   <script src="vendor/libs/bootstrap-select/bootstrap-select.js"></script>
   
   // Include page specific Javascript
   <script src="js/page.js"></script>
   
   // Include HTML
   <select class="selectpicker w-100" data-style="btn-default">
     <option>Rocky</option>
     <option>Pulp Fiction</option>
     <option>The Godfather</option>
   </select>

   Copy

   // To style only selects with the selectpicker class
   $('.selectpicker').selectpicker();

4. And you are ready to go!!

Without Node

1. Download third-party plugin's CSS & JS file
2. Save/copy JS & CSS files inside a folder at /assets/vendors/libs/ path.
3. Include Vendor JS and CSS files to your HTML file

For example, if you want to include bootstrap-select plugin, you need to follow this:

1. Download bootstrap-select plugin's CSS & JS file
2. Save/copy bootstrap-select.js & bootstrap-select.css files inside a folder For example, bootstrap-select at /assets/vendors/libs/.
3. Include Vendor JS and CSS files to your HTML file

Check plugin options and configurations that you want to use and You're done!

Remove third-party plugins

You can remove unwanted third-party plugins to reduce bundle size and execution time :

Using Node

1. Use npm uninstall <module_name> --save to remove module from dependencies in package.json
2. Confirm unwanted packages removed from the dependencies section in the package.json file.
3. Remove related directories from libs directory.
4. Remove related @imports and @includes.
5. Remove Vendor JS and CSS file includes from your HTML file

For example, if you want to remove bootstrap-select plugin, you need to follow this:

1. Uninstall node dependency using npm uninstall bootstrap-select --save.
2. Confirm bootstrap-select dependency removed from package.json file.
3. Remove the libs/bootstrap-select directory.
4. Remove @import "../../libs/bootstrap-select/mixins";
5. Remove Vendor JS and CSS files from your HTML file

Without Node

1. Remove related directories from assets/vendors/libs directory.
2. Remove Vendor JS and CSS files from your HTML file

For example, if you want to remove bootstrap-select plugin, you need to follow this:

1. Remove bootstrap-select folder that contains CSS and JS files of the plugin from assets/vendors/libs directory.
2. Remove Vendor JS and CSS files from your HTML file