Add dynamic, live alerts example to docs

[mdo]

Spiking out an option for #31330 to add some live examples of alerts (toasts are already there). Ideally we could include more JS folks could copy-pasta to use in their own environments, so hoping to get some help cleaning up the additions in application.js because right now it's not the best and doesn't scale beyond this one demo.

/cc @patrickhlauke as issue author
/cc @planetoftheweb since he mentioned better snippets in our docs

Preview:

• https://deploy-preview-33866--twbs-bootstrap.netlify.app/docs/5.0/components/alerts/#live-example
• https://deploy-preview-33866--twbs-bootstrap.netlify.app/docs/5.0/components/toasts/#live-example

Fixes #31330

[planetoftheweb]

Sorry to sound like a newbie, but I'm not too sure how to help. I don't know what a spike is and where to add examples other than here. The alerts look real good, my main problem was with the toasts, which require some addtiional Javascript Activation.

Basic Toast

<h1>Basic Toast</h1>

<button type="button" class="btn btn-danger" id="basicToastBtn">Join us</button>

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="basicToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-primary text-light">
      <h5 class="my-0">Join Our Company</h5>
    </div>
    <div class="toast-body">
      <strong>Mind Numbing Products</strong> is a force in the manufacturing and production market. Our motto is If it’s not Mind Numbing, it’s not worth it.
    </div>
  </div>  
</div>

And the JavaScript to activate it

document.querySelector("#basicToastBtn").onclick = function() {
 new bootstrap.Toast(document.querySelector('#basicToast')).show();
}

[planetoftheweb]

Here's a sample of a Multiple Toast Element with different options.

<h1>Toast Options</h1>

<h4 class="text-secondary">Basic Toast</h4>

<button type="button" class="btn btn-primary" id="basicToastBtn">Join us</button>
<button type="button" class="btn btn-info text-white" id="infoToastBtn">Info</button>

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div id="basicToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
    <div class="toast-header bg-primary text-light d-flex justify-content-between">
      <h5 class="my-0">Join Our Company</h5>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      <strong>Mind Numbing Products</strong> is a force in the manufacturing and production market. Our motto is If it’s not Mind Numbing, it’s not worth it.
    </div>
  </div>  

  <div id="infoToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-animation="false" data-bs-delay="2000">
    <div class="toast-body bg-info text-light d-flex justify-content-between">
      <p class="mb-0">As experts in lifting, moving, and nuts-and-bolting, the robotic population is an ideal match for industry and repetitive tasks.</p>
      <button type="button" class="btn-close btn-close-white ms-3" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
  </div>  

</div>

and the corresponding JavaScript

document.querySelector("#basicToastBtn").onclick = function() {
 new bootstrap.Toast(document.querySelector('#basicToast')).show();
}

document.querySelector("#infoToastBtn").onclick = function() {
 new bootstrap.Toast(document.querySelector('#infoToast')).show();
}

[patrickhlauke]

sorry, very late to the party here, but I checked those examples, and they look good to me - work as expected with screen readers etc

[XhmikosR]

@GeoSot should we close the previous alert if it's still open? Just wondering.

[GeoSot]

@XhmikosR I don't find any reason to complicate it more 😖

[XhmikosR]

Yeah, sounds good to me. I was just wondering :)