This question explores Bootstrap and addresses practical considerations related to: How do I ship only the components I need using import maps or ES modules?

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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Jul 17, 2025

Answer

Previous Question Next Question

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Jul 17, 2025

Answer

Real Questions. Clear Answers.