Can't get Bootstrap toast to close or autohide to work

Question

I am trying to implement Bootstrap 5 toasts in my ASP.NET web application, using the following code...

HTML

                    
                        
                            
                                Bootstrap
                                11 mins ago
                                
                            
                            
                                Hello, world! This is a toast message.

JavaScript

$('#companyUpdOK').toast();  // code to set up toast
...
$('#companyUpdOK').show();   // and later, the code to display the toast

So, the toast shows up, but the autohide doesn't work, and the close button doesn't work either. I have tried every combination I could find, including setting the options when initializing the toast, as in:

$('#companyUpdOK').toast({delay: 5000, autohide: true});

None of these work. What am I doing wrong?

user_16561638 · Answer

if you are using bootstrap 5 then you should use data-bs-autohide="true" and data-bs-delay="10000" you missed bs

user_943435 · Answer

Your code works with some changes

Bootstrap 5 doesn't require jQuery and the native JavaScript library is very easy to use. Yet, if you do use jQuery then keep in mind that the documentation may not show you the right way to do something using jQuery.

Here are a few issues to watch for:

1. Initialization

When Bootstrap 5 detects jQuery it loads jQuery plug-ins on the DOMContentLoaded event. Importantly, this appears to happen AFTER the jQuery ready event. If you need to do something with Bootstrap when the page loads then add a handler like:

document.addEventListener("DOMContentReady", function() {

   $("#mytoast").toast();

});

2. jQuery plug-ins

The plug-ins that Bootstrap adds to jQuery are just wrappers for Bootstrap native JavaScript methods. The syntax is different and looking at the documentation can mislead you about how to do it with jQuery.

For example, the native JavaScript way of showing a Toast:

let toast = bootstrap.Toast.getOrCreateInstance(myToastEl);
toast.show();

Yet, if you are using jQuery this will not work, even though it might seem so from the documentation.

let toast = $(myToastEl).toast();
toast.show();

With jQuery you instead need to do this:

$(myToastEl).toast("show");

3. Data Attributes

Be aware that attributes have a new prefix: data-bs- So if you use data-delay rather than the correct data-bs-delay then it will not work correctly.

Demo Snippet

The snippet incorporates these changes into the original code and the Bootstrap toast displays as expected.

test.onclick = function() {
  $('#companyUpdOK').toast("show");
}

document.addEventListener("DOMContentLoaded", function() {
  $('#companyUpdOK').toast();
});





  

    
      
        Bootstrap
        11 mins ago
        
      
      
        Hello, world! This is a toast message.

Can't get Bootstrap toast to close or autohide to work

2 Answers