skip to Main Content

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


  1. @if(Session::has('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="toast" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                  {{session('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>
    
    @endif

    This will help you
    always when you pass flash message try to use session() and the key of session for example message or error .

    Login or Signup to reply.
  2. Add this in your base layout or view:

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    

    Create a new Blade view for your toast messages – toast.blade.php.

    <div 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">
                {{ $message }}
            </div>
            <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
    </div>
    

    Pass the toast message using with().

    return view('your-view')->with('message', 'This is a toast message.');
    

    Add this where you wanna show the toast message:

    @if(session('message'))
        @include('toast')
    @endif
    

    To show the toast, you can use JS. Bootstrap 5.3 toast requires JavaScript to be triggered.

    <script>
        $(document).ready(function() {
            // Get the toast element by its ID
            var toastElement = document.getElementById('toast');
    
            // Create a new Bootstrap Toast instance
            var toast = new bootstrap.Toast(toastElement);
    
            // Show the toast
            toast.show();
        });
    </script>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search