How to properly use Bootstrap 5.3.x in Blazor web app template? (Documentation)

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:

wwwroot/
|
├──lib/
|  |
|  └──bootstrap/
|     |
|     └──dist/
|        |
|        ├──css/
|        |
|        └──js/

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>

Solution

I have no idea why the tutorial doesn't include the complete setup to utilize Bootstrap 5.3.3, which is included in the project upon creation of the template.

To solve the issue, in the App.razor file, under the:

<script src="_framework/blazor.web.js"></script>`

just add:

<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

I found out that it is the missing script, that's why the Bootstrap Toast isn't working properly.