Custom Toastr Notification In Laravel 9

WebSolutionStuff | Sep-23-2022 | Categories : Laravel jQuery CSS

In this article, we will see a custom toastr notification in laravel 9. we will create a custom notification using HTML, CSS, and jquery. In this, we will not use any kind of JS. You can display a success message, info message, warning message, and error with the help of CSS in laravel 9.

Also, we can display toastr notifications with a font awesome icon. So, you can also customize the alert notification icon as per the requirements. Also, you can customize as per your requirements like a progress bar, close button, and the timing of notification showing.

So, let's see toastr notification using CSS and custom alert notification in laravel 9.

Add HTML

In this step, we will add HTML and add google font in the <head> section.

<div class="alerts">
  <div class="alert sucess">    
    <span class="alert-icon"><i class="fas fa-check"></i>      
    </span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Success</span>
      <span class="alert-subtitle">View details</span>
    </span>    
  </div>
  <div class="alert request">
    <span class="alert-icon"><i class="fas fa-exclamation"></i></span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Request submitted</span>
      <span class="alert-subtitle">
        View details
        <ul class="little-list">
          <li>New account has been created</li>
          <li>New provider has been created</li>
          <li>New provider has been created</li>
          <li>New provider has been created</li>
        </ul>
      </span>
    </span>
  </div>
  <div class="alert wait">
    <span class="alert-icon"><i class="far fa-clock"></i></span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Wait a Moment</span>
      <span class="alert-subtitle">
        View details
        <ul class="little-list">
          <li>New account has been created</li>
          <li>New provider has been created</li>
        </ul>
      </span>
    </span>
  </div>
  <div class="alert failed">
    <span class="alert-icon"><i class="fas fa-times"></i></span>
    <span class="alert-content">
      <span class="alert-close"><i class="fas fa-times"></i></span>
      <span class="alert-title">Failed</span>      
      <span class="alert-subtitle">
        View details
        <ul class="little-list">
          <li>New account has been created</li>
          <li>New provider has been created</li>
        </ul>
      </span>
    </span>
  </div>
</div>

Add google font in the <head> tag.

<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

Read Also: Laravel 9 Toastr Notifications Example

Add CSS

In this step, we will add CSS for custom alert message notifications.

.alerts {
	 top: 0;
	 bottom: 0;
	 position: fixed;
	 display: flex;
	 flex-flow: column;
	 font-family: 'Montserrat', sans-serif;
	 padding: 30px;
	 width: auto;
}
 .alerts .alert {
	 display: flex;
	 flex-flow: row;
	 margin: 10px 0;
	 width: 250px;
	 min-height: 90px;
	 height: auto;
	 background-color: #cecece;
	 border-radius: 4px;
	 color: #fff;
	 box-shadow: 0px 10px 46px -21px rgba(0, 0, 0, 0.75);
	 transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
	 cursor: pointer;
}
 .alerts .alert:hover {
	 box-shadow: 0px 10px 60px -21px rgba(0, 0, 0, 0.80);
}
 .alerts .alert.sucess {
	 background-color: #3db56e;
}
 .alerts .alert.request {
	 background-color: #67a4c0;
}
 .alerts .alert.wait {
	 background-color: #c3d2d9;
}
 .alerts .alert.failed {
	 background-color: #c84346;
}
 .alerts .alert-icon {
	 font-weight: 300;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 30%;
	 border-top-left-radius: 4px;
	 border-bottom-left-radius: 4px;
	 background-color: rgba(0, 0, 0, 0.2);
}
 .alerts .alert-content {
	 position: relative;
	 padding: 10px;
	 display: flex;
	 justify-content: center;
	 align-items: flex-start;
	 flex-flow: column;
	 width: 100%;
}
 .alerts .alert-content .alert-close {
	 position: absolute;
	 font-size: 0.7em;
	 top: 7px;
	 right: 10px;
	 cursor: pointer;
}
 .alerts .alert-content .alert-title {
	 padding-right: 12px;
	 font-size: 0.7em;
	 font-weight: 700;
}
 .alerts .alert-content .alert-subtitle {
	 display: flex;
	 flex-flow: column;
	 margin-top: 5px;
	 font-size: 0.4em;
	 font-weight: 300;
}
 .alerts .alert-content .alert-subtitle .little-list {
	 display: none;
	 padding: 0 10px;
}
/* demo */
 * {
	 padding: 0;
	 margin: 0;
}
 body, html {
	 height: 100%;
}
 body {
	 font-family: Montserrat, sans-serif;
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	 min-height: 100vh;
	 font-size: 1.5rem;
	 background-color: #bdbdbd;
}

Add font awesome CSS.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">

Read Also: Vue Js Sweetalert Modal Notification Tutorial

Add jQuery

Now, we will add jquery to close the notification and also add jquery.min.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">

$(document).ready(function () {
  $( ".alert" ).click(function() {
    $( this ).find( ".little-list" ).slideToggle();
  });
  $( ".alert-close" ).click(function() {
    $( this ).parent().parent().fadeOut();
  });
});

Output:

custom alert notification in laravel 9