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

HTML

                    <div class="row">
                        <div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-delay="5000" data-autohide="true" 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>
                    </div>

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?

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

HTML

                    <div class="row">
                        <div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-delay="5000" data-autohide="true" 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>
                    </div>

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?

• javascript
• jquery
• bootstrap-5

• Reading the documentation is always a good place to start. Options start with data-bs-<option name> – Yogi Commented Jun 8, 2022 at 15:42
• I tried that as well, and it still does not work. – FrontRangeGuy Commented Jun 8, 2022 at 18:37

2 Answers 2

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-<name> 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();
});

<button id="test" class="btn btn-primary m-1">Show Toast</button>


<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">

    <div class="toast" id="companyUpdOK" name="companyUpdOK" role="alert" data-bs-delay="2000" data-bs-autohide="true" 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>

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js"></script>

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