Alerts in Bootstrap

How to use alerts in the bootstrap?

Alerts

Alerts are used for showing notifications and alerts in the browser.

 
<h5><b>Alerts</b></h5>
    <p>Alerts using contextual colors</p>
    <div class="container">
        <div class="alert alert-success">techfunda</div>
        <div class="alert alert-warning">dotnetfunda</div>
        <div class="alert alert-danger">itfunda</div>
        <div class="alert alert-info">kidsfunda</div>
        <div class="alert alert-warning">farmingfunda</div>
        <div class="alert alert-default">fundoovideo</div>
    </div>

In the above code snippetwe are using how to create the alert using contextual classes

<alert alert danger>-renders the alert with the danger class

<alert alert primary>-renders the alert with the primary class

<alert alert sucess>-renders the alert with the sucess class

<alert alert warning>-renders the alert with the warning class

<alert alert info>-renders the alert with the info class

<alert alert default>-renders the alert with the default class

output

Closing and linked Alerts:

Alerts are also used as closing alerts.

<h5><b>Closed and Linked alerts</b></h5>
    <p> Closing Alerts with contextual colors</p>
    <div class="container">
        <div class="alert alert-success">
            techfunda
            <a href="#" class="close" data-dismiss="alert"> &times;</a>
        </div>
        <div class="alert alert-danger">
            dotnetfunda
            <a href="#" class="close" data-dismiss="alert">&times;</a>
        </div>
    </div>

Closing and linked alerts

In the above code snippet we have defined how to close the alerts. we have taken section as container and in that container we are having class as alert alert success as techfunda and in the next line we are haing <a>link closing alert we are having class as close and data-dismiss as alert, It dismiss the alert and × renders closing symbol.

output

Alerts with Data -Attributes

We can also use other data attributes such as buttons, span etc. for alerts. take a look at the below code in which we are using span and button instead of 'a' tag.

<h5><b>Alerts using Data attributes</b></h5>
    <p>We can also usedataattributes for the alerts</p>
    <div class="alert alert-warning">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <strong>Warning!</strong> This alert is using Button to close.
    </div>
    <div class="alert alert-warning">
        <span class="close" data-dismiss="alert">&times;</span>
        <strong>Warning!</strong> This alert is using Span to close.
    </div>

Alerts using Data attributes

In the above code snippet we are using alerts with the class buttons and span as class =close and datadismiss as alert, but there will be no change in using alert operations.

<button type="button" class="close" data-dismiss="alert">×</button> -renders the button alert

<span class="close" data-dismiss="alert">×</span>-renders with span alert.

output

Alerts using different bootstrap classes

Alert using well:

<h5><b>Alerts using Well</b></h5>
    <p>We can also use wells in the alerts</p>
    <div class="well">
        <div class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <strong>Warning!</strong> This alert is using Button to close.
        </div>
    </div>

Alert using well

In the above code snippet we are using alert using well. We are taking div as well and we have taken closing alert in the div section.

output

Alert events using javascript

<h5><b>Alerts using Javascript</b></h5>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#Success").on('close.bs.alert', function () {
            alert("This Alert box is being closed.");
        });
    });
    </script>
    <div class="alert alert-danger" id="Success">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Error!</strong> There was a problem around your network.
    </div>

Alert using javascript

In the above code snippet we have used the javascript and jQuery to alert when the page is closed. We have taken script function and we are giving the jquery function as $(document.readyfunction () as ready function and in the nextline we are using jquery function as $(#success) function as my id and .on close.bs.alert, function() as Alert This box is being closed and we have given the html content as in the dic section as alert danger and we have fiven id as success which calls the function success in the script tag.

output