saftutorials.com
Bootstrap Alert Tutorial

Bootstrap Provide alert class for using varieties messaging alert. You can use alert fixed or with an dismiss button. 


Example of Bootstrap Alert


Code

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="alert alert-primary" role="alert">
    This is a primary alert message!
  </div>
  <div class="alert alert-secondary" role="alert">
    This is a secondary alert message!
  </div>
  <div class="alert alert-success" role="alert">
    This is a success alert message!
  </div>
  <div class="alert alert-danger" role="alert">
    This is a danger alert message!
  </div>
  <div class="alert alert-warning" role="alert">
    This is a warning alert message!
  </div>
  <div class="alert alert-info" role="alert">
    This is a info alert message!
  </div>
  <div class="alert alert-light" role="alert">
    This is a light alert message!
  </div>
  <div class="alert alert-dark" role="alert">
    This is a dark alert message!
  </div>
</body>
</html>


Bootstrap Alert with Link

Code

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="alert alert-primary" role="alert">
    This is a primary alert with <a href="#" class="alert-link">link text</a>.
  </div>
  <div class="alert alert-secondary" role="alert">
    This is a secondary alert with <a href="#" class="alert-link">link text</a>.
  </div>
  <div class="alert alert-success" role="alert">
    This is a success alert with <a href="#" class="alert-link">link text</a>.
  </div>
  <div class="alert alert-danger" role="alert">
    This is a danger alert with <a href="#" class="alert-link">link text</a>.
  </div>
  <div class="alert alert-warning" role="alert">
    This is a warning alert with <a href="#" class="alert-link">link text</a>.
  </div>
  <div class="alert alert-info" role="alert">
    This is a info alert with <a href="#" class="alert-link">link text</a>.
  </div>
  <div class="alert alert-light" role="alert">
    This is a light alert with <a href="#" class="alert-link">link text</a>.
  </div>
  <div class="alert alert-dark" role="alert">
    This is a dark alert with <a href="#" class="alert-link">link text</a>.
  </div>
</body>
</html>


Bootstrap Alert Dismiss

Using the Bootstrap alert JS plugin, it’s possible to dismiss any alert inline.


Step1: Be sure you’ve loaded the alert plugin or the compiled Bootstrap JavaScript.

Step2: Add a dismiss button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the .close button.

Step3: On the dismiss button, add the data-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

Step4: To animate alerts when dismissing them, be sure to add the .fade and .show classes.

Example

Code

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <strong>Hello!</strong> You can dismiss me only one click.
  </div>
</body>
</html>


Bootstrap Alert Triggers

Enable dismissal of an alert via JavaScript:

$(".alert").alert()


Or with data attributes on a button within the alert example below:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>


Bootstrap Alert Method

1) $().alert() - Makes alert listen for click events on descendant elements which have the data-dismiss="alert" attribute.

2) $().alert('close') - 

3) $(".alert").alert('close')


Bootstrap Alert Events

1) close.bs.alert - This event forces immediately when the close instance method is called.

2) closed.bs.alert - This event is forced the alert has been closed.


$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic