Docs: live examples of alerts and toasts

[patrickhlauke]

Not sure how easy/difficult it would be, since they require initialisation, but...would be nice to have actual working examples for https://v5.getbootstrap.com/docs/5.0/components/alerts/ and https://v5.getbootstrap.com/docs/5.0/components/toasts/

[techboyg5]

They already exist, you just linked to them :)

[patrickhlauke]

they're already present and visible on the page when it loads. need live examples where you'd trigger something and THEN they show up. smartypants.

[StarTrooper08]

@patrickhlauke Ya great idea that would be nice and beginner will easily understand the use of the bootstrap component .
But do the example should be in gif image form or exact coded form ?

[XhmikosR]

Not sure how to proceed with the Alert live example. The moment it's closed, the element is removed from the DOM.

I think we need to recreate the element through JS so that we have a button which says Show Alert and manually hide/show it when the close button is clicked.

[planetoftheweb]

I agree. I'm working on the course for Bootstrap Essential Traninig and found this code to be confusing for a user:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

[].slice.call is cool, but not the clearest to understand. Plus, it doesn't show you how to implement a button click.

This code initializes the toasts, but doesn't show you how to call a toast from a button.

Here's something I did.

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

With a corresponding CodePen to illustrate:

https://codepen.io/planetoftheweb/pen/vYgVBGb?editors=1010

I think you need some examples like that instead of just the initialization.