Method 1: Data Attributes (Recommended)

Initialize components automatically using HTML data attributes.

<!-- Modal with data attributes -->
        <button type="button" 
                class="btn btn-primary" 
                data-bs-toggle="modal" 
                data-bs-target="#exampleModal">
        Launch modal
        </button>

        <!-- Modal structure -->
        <div class="modal fade" id="exampleModal">
        <div class="modal-dialog">
            <div class="modal-content">
            <!-- Modal content -->
            </div>
        </div>
        </div>

        <!-- No JavaScript required! -->

Method 2: JavaScript API

Initialize components programmatically using JavaScript.

// Get modal element
        var myModalEl = document.getElementById('myModal');

        // Create modal instance
        var myModal = new bootstrap.Modal(myModalEl, {
        backdrop: 'static',  // Modal doesn't close on click
        keyboard: false      // Modal doesn't close on ESC
        });

        // Show modal
        myModal.show();

        // Hide modal
        myModal.hide();

        // Toggle modal
        myModal.toggle();

Modal Events Example

// Get modal element
        var myModal = document.getElementById('myModal');

        // Listen for modal events
        myModal.addEventListener('show.bs.modal', function (event) {
        // Fires when modal is about to show
        console.log('Modal is about to show');
        
        // Access related target (button that triggered)
        var button = event.relatedTarget;
        console.log('Triggered by:', button);
        });

        myModal.addEventListener('shown.bs.modal', function () {
        // Fires when modal is fully shown
        console.log('Modal is now visible');
        });

        myModal.addEventListener('hide.bs.modal', function () {
        // Fires when modal is about to hide
        console.log('Modal is about to hide');
        });

        myModal.addEventListener('hidden.bs.modal', function () {
        // Fires when modal is fully hidden
        console.log('Modal is now hidden');
        });

Common Events by Component

Modal Methods

// Get modal instance
        var myModal = new bootstrap.Modal(
        document.getElementById('myModal')
        );

        // Available methods
        myModal.show();      // Shows modal
        myModal.hide();      // Hides modal
        myModal.toggle();    // Toggles modal
        myModal.handleUpdate(); // Updates modal position
        myModal.dispose();   // Destroys modal instance

        // Modal options
        var modal = new bootstrap.Modal(el, {
        backdrop: true,     // Show backdrop
        keyboard: true,     // Close on ESC
        focus: true        // Focus on modal when shown
        });

Tooltip Methods

// Initialize tooltip
        var tooltip = new bootstrap.Tooltip(
        document.querySelector('[data-bs-toggle="tooltip"]')
        );

        // Available methods
        tooltip.show();      // Shows tooltip
        tooltip.hide();      // Hides tooltip
        tooltip.toggle();    // Toggles tooltip
        tooltip.enable();    // Enables tooltip
        tooltip.disable();   // Disables tooltip
        tooltip.toggleEnabled(); // Toggles enabled state
        tooltip.dispose();   // Destroys tooltip instance

        // Tooltip options
        var tooltip = new bootstrap.Tooltip(el, {
        animation: true,     // Fade animation
        delay: {show: 100, hide: 100}, // Delay in ms
        placement: 'top',    // Position
        title: 'Tooltip text' // Content
        });

React Integration

Use React Bootstrap or Bootstrap components with React lifecycle methods.

// Using react-bootstrap
        import { Modal, Button } from 'react-bootstrap';

        function MyModal() {
        const [show, setShow] = useState(false);
        
        return (
            <>
            <Button onClick={() => setShow(true)}>
                Show Modal
            </Button>
            
            <Modal show={show} onHide={() => setShow(false)}>
                <Modal.Header closeButton>
                <Modal.Title>Modal Title</Modal.Title>
                </Modal.Header>
                <Modal.Body>Modal content</Modal.Body>
            </Modal>
            </>
        );
        }

        // Manual integration
        useEffect(() => {
        // Initialize Bootstrap components
        var tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        tooltips.forEach(tooltip => {
            new bootstrap.Tooltip(tooltip);
        });
        
        // Cleanup on unmount
        return () => {
            tooltips.forEach(tooltip => {
            var instance = bootstrap.Tooltip.getInstance(tooltip);
            if (instance) instance.dispose();
            });
        };
        }, []);

Vue.js Integration

Use BootstrapVue or direct integration with Vue lifecycle hooks.

// Using BootstrapVue
        <template>
        <b-button v-b-modal.my-modal>Show Modal</b-button>
        
        <b-modal id="my-modal" title="Modal Title">
            <p>Modal content</p>
        </b-modal>
        </template>

        <script>
        import { BootstrapVue, BModal, BButton } from 'bootstrap-vue';

        Vue.use(BootstrapVue);

        export default {
        components: {
            BModal,
            BButton
        }
        }
        </script>

        // Manual integration
        export default {
        mounted() {
            // Initialize Bootstrap components
            this.initializeBootstrap();
        },
        
        methods: {
            initializeBootstrap() {
            // Initialize tooltips
            var tooltips = this.$el.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltips.forEach(el => {
                new bootstrap.Tooltip(el);
            });
            }
        },
        
        beforeUnmount() {
            // Cleanup Bootstrap instances
            var tooltips = this.$el.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltips.forEach(el => {
            var instance = bootstrap.Tooltip.getInstance(el);
            if (instance) instance.dispose();
            });
        }
        }

Lazy Initialization

Initialize components only when needed, not all at page load.

// Lazy initialize tooltips
        function initializeTooltips() {
        // Only initialize visible tooltips
        var visibleTooltips = Array.from(
            document.querySelectorAll('[data-bs-toggle="tooltip"]')
        ).filter(el => el.offsetParent !== null); // Check if visible
        
        visibleTooltips.forEach(el => {
            if (!bootstrap.Tooltip.getInstance(el)) {
            new bootstrap.Tooltip(el);
            }
        });
        }

        // Initialize on demand
        document.getElementById('showTips').addEventListener('click', function() {
        initializeTooltips();
        });

        // Or initialize when element comes into view
        const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
            var el = entry.target;
            if (el.hasAttribute('data-bs-toggle')) {
                // Initialize component
            }
            }
        });
        });

Selective Loading

Load only the Bootstrap components you need.

// Import individual components
        import Alert from 'bootstrap/js/dist/alert';
        import Button from 'bootstrap/js/dist/button';
        import Modal from 'bootstrap/js/dist/modal';
        import Tooltip from 'bootstrap/js/dist/tooltip';

        // Or use tree-shaking with bundlers
        // Webpack, Rollup, Parcel will remove unused code

        // Manual selective loading (CDN alternative)
        // Load only modal and tooltip components