Bootstrap Notification Popup Box using Bootstrap-growl JS Example

By Hardik Savani November 5, 2023 Category : Bootstrap jQuery

We mostly prefer notification in our project, because for example if admin add new record and we need to display notification with success alert, info elert etc when comes error then display error notication. So if you are using bootstrap then you can use growl js plugin, you have to just add js, no need to add css file.

In this example i use bootstrap-growl.js plugin that provide several notification type like warning, success, info, error etc and several function. In my previous post also added using toastr.js, you can also see here : Jquery notification popup box example using toastr JS plugin with demo. bootstrap-growl plugin you can use easily with bootstrap and very customize. You can run bellow example and you can see how it works and pretty good.

Example:

Read Also: How to install Bootstrap 5 in Angular 16 Application?
<html lang="en">
<head>
    <title>Bootstrap - notification popup box using bootstrap-growl JS</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</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>

you can get more information from here : bootstrap-growl.

I hope it can help you...

Tags :
Previous

How to Use Soft Delete in Laravel?
Next

Laravel Where Clause with date_format() Example

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares