How do I ship only the components I need using import maps or ES modules?

Asked on Jul 28, 2025

1 Answer

To ship only the Bootstrap components you need using ES modules, you can import specific components directly from Bootstrap's package. This allows you to include only the necessary parts of Bootstrap in your project.

<!-- BEGIN COPY / PASTE -->
        <!-- Import Bootstrap's JavaScript components using ES modules -->
        <script type="module">
            import { Tooltip, Toast, Popover } from 'bootstrap';

            // Initialize Tooltip
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new Tooltip(tooltipTriggerEl));

            // Initialize Toast
            const toastElList = document.querySelectorAll('.toast');
            const toastList = [...toastElList].map(toastEl => new Toast(toastEl));

            // Initialize Popover
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
            const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new Popover(popoverTriggerEl));
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

Use ES modules to import only the Bootstrap components you need, reducing the bundle size.
Ensure your project setup supports ES modules. This typically requires a modern JavaScript environment or build tool.
The example initializes Tooltip, Toast, and Popover components. Adjust imports and initialization as needed for other components.
Always verify that your HTML elements have the correct `data-bs-*` attributes for Bootstrap's JavaScript components to function properly.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions