How to show notification popup box by using bootstrap-growl JS plugin?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now here we are know about How to show notification popup box by using bootstrap-growl JS plugin? We are mostly prefer to show notification in our application, because for an example if any admin add any new data and if we are not show any notification then the user can be confuse. So we need to display the notification with the success alert, info alert or etc when it’s comes an error then display the error notification. So if we are using bootstrap then we can use growl js plugin, we need to just add js, no need to add any css file.

Now In this example i will use bootstrap-growl.js plugin on that way it is provide us several notification type as like warning, success, info, error etc and several function. And also in my previous blog i also added by using toastr.js, you can also follow that example just click here : How to notification popup box by using toastr JS in Jquery ? we are know that bootstrap-growl plugin we can use easily use with bootstrap and very easily to customize. So we can run this in the bellow example and we can see this how it works and how pretty good.

Example:
<html lang="en">
<head>
    <title>Bootstrap - notification popup box using bootstrap-growl JS- Codingspoint</title>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-growl/1.0.0/jquery.bootstrap-growl.min.js"></script>
</head>
<body>
<div class="container text-center">
    <br/>
        <h2>Bootstrap - notification popup box using bootstrap-growl JS Plugin-Codingspoint</h2>
    <br/>
    <button class="success btn btn-success">Success</button>
    <button class="error btn btn-danger">Error</button>
    <button class="info btn btn-info">Info</button>
    <button class="warning btn btn-warning">Warning</button>
</div>  
<script type="text/javascript">
    $(".success").click(function(){
        $.bootstrapGrowl('We do have the Kapua suite available.',{
            type: 'success',
            delay: 2000,
        });
    });
    $(".error").click(function(){
        $.bootstrapGrowl('You Got Error',{
            type: 'danger',
            delay: 2000,
        });
    });
    $(".info").click(function(){
        $.bootstrapGrowl('It is for your kind information',{
            type: 'info',
            delay: 2000,
        });
    });
    $(".warning").click(function(){
        $.bootstrapGrowl('It is for your kind warning',{
            type: 'warning',
            delay: 2000,
        });
    });
</script>
</body>
</html>

Read Also : Laravel 8 Mobile Number Verification Tutorial

Thanks for read. I hope it help you. For more you can follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →