I am currently diving into the world of Bootstrap (v5.1.0) and gulp, but I'm a bit confused about how to import specific Bootstrap JavaScript plugins. I attempted to bring in only the modal plugin from Bootstrap, but encountered either a syntax error or no response when trying to launch the modal.
The following is my index.html showcasing the modal example from Bootstrap 5 documentation
<head>
...
<script src="main.js" async></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
</body>
My intention was to import the necessary JS plugins (found at js/src/ in the Bootstrap package) at the beginning of the main.js file:
(async function main() {
import BaseComponent from 'bootstrap/base-component.js'
import Modal from 'bootstrap/modal.js'
const {myConfig} = await import("./myconfig.js");
...
})();
Alternatively, I also attempted importing them like this:
import { BaseComponent } from 'bootstrap/base-component'
import { Modal } from 'bootstrap/modal'
(async function main() {
const {myConfig} = await import("./myconfig.js");
...
})();
If someone could guide me on how to selectively import Bootstrap's JS plugins or provide best practices for working with Bootstrap's JS plugins, I would greatly appreciate it. Currently, I compile my website source files using gulp - just in case that affects the situation.