'Bootstrap 5 : toast without jquery

I am using Laravel 8 and want to show a sucess information (after a post for example). For the moment I did a simple alert using the session,like that :

    @if(Session::has('success'))
<div class="alert alert-success alert-dismissible">
    {{ Session::get('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">&nbsp;</button>
    @php
    Session::forget('success');
    @endphp
</div>

The result is fine :

enter image description here

I want now to display a toast instead of this alert. And if I have understood, BS5 allows now to use "toasts" without jquery. I tried to add this script in the @if section , but without success :

<script type="text/javascript">
   
        var myAlert =document.getElementById('essai');//select id of toast
          var bsAlert = new bootstrap.Toast(myAlert);//inizialize it
          bsAlert.show();//show it
    
  </script>

my toast is :

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="essai">
    <div class="toast-header">
      
      <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>

Of course I have this error :

Uncaught ReferenceError: bootstrap is not defined

As I am not expert of JS into HTML page, any suggestion will be appreciated.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source