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

Question

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>

Dale K · Accepted Answer · 2025-07-21 19:57:04Z

1

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.

edited Jul 21 at 19:57

Dale K

28.1k15 gold badges59 silver badges85 bronze badges

answered Jul 19 at 8:33

DevQt

1,9182 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jerdine Sabio Jul 19 at 9:05

That's the simplest way to solve your issue and you can mark it as the answer. Blazor must've excluded the javascript by default because they wanted you to create blazor and js compatible components similar to this example; stackoverflow.com/questions/59256798/… There's also another way to implement toast in blazor by writing a toast service in blazor that calls javascript code to dynamically add a toast to the DOM and show it.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related