'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"> </button>
@php
Session::forget('success');
@endphp
</div>
The result is fine :
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 |
|---|

