LearnKode

2 Example(s) of Bootstrap Alerts


Description :

Alert boxes are the plugins used to show the messages in popup.Here classes like .alert-success,.alert-warning, .alert-info and .alert-danger are used to give different colours to the alert boxes.


Bootstrap Alerts Example - 1 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Learnkode.com - Bootstrap Alert Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Alerts</h2>
        <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Success!</strong> This box represents a positive action.
        </div>
        <div class="alert alert-info fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Info!</strong> This box represents a information action
        </div>
        <div class="alert alert-warning fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Warning!</strong> This box represents a warning action
        </div>
        <div class="alert alert-danger fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Danger!</strong> This box represents a danger action
        </div>
    </div>

</body>
</html>
Try it » Download Example »

Output

Description :

The first two alerts are dismissed using data-dismiss attribute of bootstrap and last two alerts are closed using jquery.


Bootstrap Alerts Example - 2 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Bootstrap Alert Example</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Alerts</h2>
        <div class="alert alert-success fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Success!</strong> This box represents a positive action.
        </div>
        <div class="alert alert-info fade in">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
            <strong>Info!</strong> This box represents a information action
        </div>
        <div class="alert alert-warning fade in">
            <a href="#" class="close" id="warningClose">&times;</a>
            <strong>Warning!</strong> This box represents a warning action
        </div>
        <div class="alert alert-danger fade in">
            <a href="#" class="close" id="dangerClose">&times;</a>
            <strong>Danger!</strong> This box represents a danger action
        </div>
    </div>

</body>
</html>
<script>
    $(document).ready(function () {
        $("#dangerClose").click(function () {
            $(".alert-danger").alert("close");
        });
        $("#warningClose").click(function () {
            $(".alert-warning").alert("close");
        });
    });
</script>
Try it » Download Example »

Output