Need help with Bootstrap Toast message

[glewe]

Hi all,
I am trying to integrate a Bootstrap Toast message as documented here.

My astro file snippet looks like this:

            <!--begin::Toast-->
            <div class="card card-primary card-outline mb-2">
              <!--begin::Header-->
              <div class="card-header">
                <div class="card-title">Toast</div>
              </div>
              <!--end::Header-->
              <!--begin::Body-->
              <div class="card-body">
                <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
                <div class="toast-container position-fixed bottom-0 end-0 p-3">
                  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                      <img src="..." class="rounded me-2" alt="...">
                      <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>
              <!--end::Body-->
              <!--begin::JavaScript-->
              <script is:inline>
                const toastTrigger = document.getElementById('liveToastBtn');
                const toastLiveExample = document.getElementById('liveToast');
                if (toastTrigger) {
                  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
                  toastTrigger.addEventListener('click', () => {
                    toastBootstrap.show();
                  })
                }
              </script>
              <!--end::JavaScript-->
            </div>
            <!--end::Toast-->

However, the button does not show the Toast message.
The console reports that the 'bootstrap' reference is not defined in the Javascript snippet.
Any idea, how to make that work?

Best regards,
George

[glewe]

I figured it out.

The Javascript code needs to go into _scripts.astro. In this example I am using buttons to show the toast message. There might be other triggers in other use cases.
Here, the button tag has two attributes, data-bs-toggle="toast" and data-bs-target="<toast ID>":

...
<!--begin::Bootstrap Toasts-->
<script is:inline>
  const toastTriggerList = document.querySelectorAll('[data-bs-toggle="toast"]')
  toastTriggerList.forEach(btn => {
    btn.addEventListener('click', event => {
      event.preventDefault();
      const toastEle = document.getElementById(btn.getAttribute('data-bs-target'));
      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastEle);
      toastBootstrap.show();
    })
  })
</script>
<!--end::Bootstrap Toasts-->

The HTML code in the page astro file could look like this (showing a toast message in the lower right corner):

<button type="button" class="btn btn-primary mb-2" data-bs-toggle="toast" data-bs-target="toastDefault">Show default toast</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="toastDefault" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <i class="bi bi-circle me-2"></i>
      <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>