Laravel Bootstrap Alert (flash message) with Examples

In laravel bootstrap alert, Today We am going to share with you How to use redirect with flash messages without any package in Laravel application. In this example We haven’t use any package for alert notification, we can do it simply by following this tutorials.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Laravel 7, 6, 5.8, 5 flash message. This lesson explains, how you can implement alert notifications in laravel applications.

Laravel – Implement Flash/Alert Message using Bootstrap

When we work with laravel, we required to show/display alert notification success as well as error messages. Here you can understand the different method to show or display alert notification error or success bootstrap alert message in laravel projects:

Flash messages is required in laravel project because that way we can give alter with what progress complete, error, warning etc. In this Article We added several method to give alert notification like redirect with alert-success message in bootstrap Session-Based flash message, redirect with error message, redirect with warning message timeout as well as redirect with info Display Message. In this Tutorials and Courses we use bootstrap flash alert layout that method it set off great user friendly Page layout.

Bootstrap alert message in laravel

If you have already started project and you want to use alert notifications then you can do it by this example.

Therefor, you have to just follow basic 3+ step to integrate alert notification in your laravel project. Therefor let’s follow list of the phase:

Step 1: alert-notification blade file

In first step we will create new blade file alert-notification.blade.php. In this file we will write source code of bootstrap alert as well as check which messages come.

There are following alert will added:

  1. Laravel success alert
  2. Laravel error alert
  3. Laravel warning alert
  4. Laravel info alert
  5. Laravel validation error alert

Therefor, let’s create alert-notification.blade.php file and change the following the source code on that file.

resources/views/alert-notification.blade.php

@if ($notification = Session::get('success'))
<div class="alert alert-success alert-block">
	<button type="button" class="close" data-dismiss="alert">×</button>	
        <strong>{{ $notification }}</strong>
</div>
@endif


@if ($notification = Session::get('error'))
<div class="alert alert-danger alert-block">
	<button type="button" class="close" data-dismiss="alert">×</button>	
        <strong>{{ $notification }}</strong>
</div>
@endif


@if ($notification = Session::get('warning'))
<div class="alert alert-warning alert-block">
	<button type="button" class="close" data-dismiss="alert">×</button>	
	<strong>{{ $notification }}</strong>
</div>
@endif


@if ($notification = Session::get('info'))
<div class="alert alert-info alert-block">
	<button type="button" class="close" data-dismiss="alert">×</button>	
	<strong>{{ $notification }}</strong>
</div>
@endif


@if ($errors->any())
<div class="alert alert-danger">
	<button type="button" class="close" data-dismiss="alert">×</button>	
	Please check the form under for errors
</div>
@endif

Step 2: use alert-notification file in theme

In this step we have to just include alert-notification.blade.php file in your assets theme default file. Therefor we can add file like this way:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Styles -->
    <link href="/css/app.css" rel="stylesheet">
</head>
<body>


    <div id="app">
        @include('alert-notification')


        @yield('content')
    </div>


    <!-- Scripts -->
    <script src="/js/app.js"></script>
</body>
</html>

Step 3: use flash messages with redirect

In this step we will understand how to give Session-Based flash message when you redirect one by one:

1. Redirect with success Display Message

We can easy redirect route or redirect url or redirect back with success alert notification, we can use in controller like this MVC way:

public function create(Request $request)
{
	$this->validate($request,[
        'title' => 'required',
        'details' => 'required'
        ]);


	$movies = Movie::create($request->all());


	return back()->with('success','Movies created successfully!');
}

You can get layout of success alert notification:

2. Redirect with error Display Message

We can easy redirect route or redirect url or redirect back with error alert notification, we can use in controller like this way:

public function create(Request $request)
{
    return redirect()->route('home')
        ->with('error','You have no any types of the permission for this web page!');
}

You can get layout of error alert notification:

3. Redirect with warning Display Message

We can easy redirect route or redirect url or redirect back with warning alert notification, we can use in controller like this way:

public function create(Request $request)
{
    return redirect()->route('home')
            ->with('warning','Don't Open this link);
}

You can get layout of warning alert notification:

4. Redirect with info Display Message

We can easy redirect route or redirect url or redirect back with info alert notification, we can use in controller like this way:

public function create(Request $request)
{
    $this->validate($request,[
        'title' => 'required',
        'details' => 'required'
        ]);


    $movies = Movie::create($request->all());


    return back()->with('info','You added new movies, follow next step!');
}

You can get layout of info alert notification:

5. Validation Error

If you use laravel 5/6/7 validation then you will redirect back with errors automatically, At that time it will also generate error alert notification.

public function create(Request $request)
{
    $this->validate($request,[
        'title' => 'required',
        'details' => 'required'
        ]);


    .....
}

You can get layout of error alert notification:

This way you can easy implement alert notification in your laravel 5/6/7 application.

Best way to pass bootstrap alert in Laravel

In a web project, you often required to pass the status message variables across the pages to show or display the result of an action performed by the user.

If you are using bootstrap the best way you can show/display the status messages is to wrap them around an HTML element with a class of alert-success, alert-danger, alert-info and similar others ( Bootstrap Alerts )

Here is the custom source code to display your status Display Message in the Laravel blade file.

@if(session()->has('message'))
            <div class="alert {{session('alert') ?? 'alert-info'}}">
                {{ session('message') }}
            </div>
 @endif

With this, you required to send two variables, one Session-Based flash message which contains the actual message which you want to show or display the user on-screen and another alert type, If the second variable is skipped it will consider the default value of alert-info for the Session-Based flash data.

Now to send the Display Message on redirect you can do this.

Redirect back with danger message

return redirect()->back()->with(['message' => 'sorry Dear, You have a Missing validation', 'alert' => 'alert-danger']);

Redirect back with success message

return redirect()->back()->with(['message' => 'Record is stored into the your latest database', 'alert' => 'alert-success']);

Redirect back with default alert type (will use alter-info by default)

return redirect()->back()->with(['message' => 'Welcome To You......']);

This tutorial also explains, how you can implement success or error bootstrap alert messages with sweet alert js in your laravel project.

Laravel Flash Message

Here, you will understand the types of alert notification.

  • Success Flash Message
  • Error Flash Message
  • Flash Success With Sweet alert
  • Flash Error With Sweet alert

Laravel Success Flash Message

First of all, we required to add the under source code in your HTML files:

@if(Session::has('success'))
    <div class="alert alert-success">
        {{Session::get('success')}}
    </div>
@endif

The second thing, When you send the success Display Message. Therefor you can use the under source code in your controller:

return Redirect::to("/")->withSuccess('Good Luck, You have get a Success message');

Laravel Error Flash Message

If you want to display an error Display Message in your blade views, so you can add the under source code in your blade file:

@if(Session::has('fail'))
    <div class="alert alert-danger">
       {{Session::get('fail')}}
    </div>
@endif

The second thing, add the under source code in your controller, where you want to send the error message:

 return Redirect::to("/")->withFail('sorrym you have a Generated new Error message');

If you want to use the sweet alert message in your laravel project. Therefor, first of all, you required to include sweet alert CDN or sweet alert js library in your laravel flash message jQuery Ajax application:

Laravel Flash Success With Sweet Alert

If you want to show or display a success Session-Based flash message with sweet alert. Therefor you can use the under laravel flash message from javascript source code in your blade view files:

@if(Session::has('success'))
  <script type="text/javascript">
     swal({
         title:'Success!',
         text:"{{Session::get('success')}}",
         timer:5000,
         type:'success'
     }).then((value) => {
       //location.reload();
     }).catch(swal.noop);
 </script>
 @endif

If you use the above source code for a success Session-Based flash message, this using laravel flash message timeout Display Message automatically hides after 5 seconds.

The sweet alert-success message looks like:

Laravel Flash Error With Sweet Alert

If you want to show/display an error message with a sweet alert. Therefor you can use the under source code in your blade view files:

@if(Session::has('fail'))
 <script type="text/javascript">
    swal({
        title:'Oops!',
        text:"{{Session::get('fail')}}",
        type:'error',
        timer:5000
    }).then((value) => {
      //location.reload();
    }).catch(swal.noop);
</script>
@endif

If you use the above source code for an error Session-Based flash message, this message automatically hides after 5 seconds.

The sweet alert error message looks like:

Conclusion

In this Best Article, you have Know, how you can implement step by step bootstrap alert in laravel 5/6/7 Web projects.

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about laravel bootstrap alert.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel 6 get Session ID Easily
  2.   PHP Laravel AJAX Request GET and POST Example
  3.   Simple Vuejs Date Filter Example
  4.   How To Work With Laravel 6 Flash Messages?
  5.   Advanced jQuery Ajax Pagination PHP MySQL using jQuery
  6.   laravel flash message Notification in Blade template
  7.   How to return view with flash message in Laravel 6?
  8.   Laravel Grouping Cache Offset & Limit Eloquent methods
  9.   Session Flash Messages in Laravel 6 Tutorial
  10.   How To Import CSV File into MySQL using PHP