I am currently using Bootstrap Alert to show the message in laravel application
@if(Session::has('message'))
<div class="alert alert-{{ session('class') }} alert-dismissible fade show rounded-0"
role="alert">
<i class="fa fa-{{ session('icon') }}"></i>
{{ session('message') }}
<button type="button" class="btn-close" data-bs-dismiss="alert"
aria-label="Close"></button>
</div>
@endif
But I want to use Bootstrap toast with a dynamic message
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="toast" class="toast align-items-center text-bg-info text-white rounded-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Some Message <i class="far fa-face-smile"></i>
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
I’ve created the alert component. How should I make toast system trigger.
Using laravel 10 and bootstrap 5.3
2
Answers
This will help you
always when you pass flash message try to use session() and the key of session for example message or error .
Add this in your base layout or view:
Create a new Blade view for your toast messages –
toast.blade.php
.Pass the toast message using
with()
.Add this where you wanna show the toast message:
To show the toast, you can use JS. Bootstrap 5.3 toast requires JavaScript to be triggered.