<!-- Basic toast structure -->
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
            </div>

            <!-- JavaScript initialization -->
            <script>
            const toastElList = document.querySelectorAll('.toast')
            const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl))
            </script>

<!-- Toast with different colors -->
            <div class="toast">
            <div class="toast-header bg-primary text-white">
                <strong class="me-auto">Primary</strong>
                <button type="button" class="btn-close btn-close-white"></button>
            </div>
            <div class="toast-body">Message</div>
            </div>

            <div class="toast">
            <div class="toast-header bg-success text-white">
                <strong class="me-auto">Success</strong>
                <button type="button" class="btn-close btn-close-white"></button>
            </div>
            <div class="toast-body">Message</div>
            </div>

            <div class="toast">
            <div class="toast-header bg-warning text-dark">
                <strong class="me-auto">Warning</strong>
                <button type="button" class="btn-close"></button>
            </div>
            <div class="toast-body">Message</div>
            </div>

            <div class="toast">
            <div class="toast-header bg-danger text-white">
                <strong class="me-auto">Error</strong>
                <button type="button" class="btn-close btn-close-white"></button>
            </div>
            <div class="toast-body">Message</div>
            </div>

Order Update

Wireless Headphones

Your order has been shipped!

Tracking #: ABC123456

Confirmation Required

Are you sure you want to delete this item?

DeleteCancel

<!-- Toast with icon -->
            <div class="toast">
            <div class="toast-header">
                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-2" style="width: 30px; height: 30px;">
                <i class="bi bi-bell"></i>
                </div>
                <strong class="me-auto">Notification</strong>
                <button type="button" class="btn-close"></button>
            </div>
            <div class="toast-body">
                <p class="mb-2">You have new notifications</p>
                <button class="btn btn-sm btn-primary">View All</button>
            </div>
            </div>

            <!-- Toast with progress bar -->
            <div class="toast">
            <div class="toast-header">
                <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
                <strong class="me-auto">Processing...</strong>
                <button type="button" class="btn-close"></button>
            </div>
            <div class="toast-body">
                <div class="progress">
                <div class="progress-bar" style="width: 75%"></div>
                </div>
            </div>
            </div>

            <!-- Toast with product info -->
            <div class="toast">
            <div class="toast-header bg-info text-white">
                <strong class="me-auto">
                <i class="bi bi-cart-check me-1"></i>
                Order Update
                </strong>
                <button type="button" class="btn-close btn-close-white"></button>
            </div>
            <div class="toast-body">
                <div class="d-flex">
                <img src="product.jpg" alt="Product" style="width: 50px; height: 50px;"/>
                <div class="ms-3">
                    <h6 class="mb-1">Product Name</h6>
                    <p class="mb-0">Your order has been shipped!</p>
                </div>
                </div>
            </div>
            </div>

Configuration Options

• animation: true - Apply CSS fade transition
• autohide: true - Auto hide the toast
• delay: 5000 - Delay in ms before hiding

Events

• show.bs.toast - Fires immediately when show is called
• shown.bs.toast - Fires when toast is visible
• hide.bs.toast - Fires immediately when hide is called
• hidden.bs.toast - Fires when toast is hidden

// JavaScript for toast control

            // Initialize toast
            const toastEl = document.getElementById('myToast');
            const toast = new bootstrap.Toast(toastEl, {
            animation: true,
            autohide: true,
            delay: 5000
            });

            // Show toast
            toast.show();

            // Hide toast
            toast.hide();

            // Event handling
            toastEl.addEventListener('shown.bs.toast', function () {
            console.log('Toast was shown');
            });

            toastEl.addEventListener('hidden.bs.toast', function () {
            console.log('Toast was hidden');
            });

            // Create toast dynamically
            function createToast(title, message, type = 'info') {
            const toastId = 'toast-' + Date.now();
            const toastHtml = `
                <div id="${toastId}" class="toast" role="alert">
                <div class="toast-header bg-${type} text-white">
                    <strong class="me-auto">${title}</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                </div>
                <div class="toast-body">
                    ${message}
                </div>
                </div>
            `;
            
            // Add to container
            const container = document.getElementById('toastContainer');
            container.insertAdjacentHTML('beforeend', toastHtml);
            
            // Initialize and show
            const newToastEl = document.getElementById(toastId);
            const newToast = new bootstrap.Toast(newToastEl, {
                autohide: true,
                delay: 5000
            });
            newToast.show();
            
            // Remove from DOM after hide
            newToastEl.addEventListener('hidden.bs.toast', function () {
                this.remove();
            });
            }

            // Example usage
            createToast('Success', 'Operation completed successfully!', 'success');