Using Bootstrap Toasts: Live example and implementing it to my Blazor web app template does nothing.
After following the tutorial: Build your first web app with ASP.NET Core using Blazor.
I tried expanding its project structure by using Bootstrap Toast, since I know that the template by following the tutorial has Bootstrap v5.3.3, and it's located at this directory:
However, by simply implementing this code introduces the previously mentioned issue:
<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><script> const toastTrigger = document.getElementById('liveToastBtn') const toastLiveExample = document.getElementById('liveToast') if (toastTrigger) { const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample) toastTrigger.addEventListener('click', () => { toastBootstrap.show() }) }</script>Lastly, since I am new to this Blazor web app, I have no idea why this is happening since the template has already used Bootstrap, which is defined in the App.razor file:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="/" /><link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" /><link rel="stylesheet" href="@Assets["app.css"]" /><link rel="stylesheet" href="@Assets["GlamGearAdmin.styles.css"]" /><ImportMap /><link rel="icon" type="image/png" href="favicon.png" /><HeadOutlet /></head><body><Routes /><script src="_framework/blazor.web.js"></script></body></html>