jQuery Bootstrap Alerts

Basic usage

jQuery('#alert-container').bootstrapAlert({
  message: 'This is a info message.',
});

Examples

Code

<script>
  // Default usage
  $('#default-alert').click(function () {
    $('#alert-container').bootstrapAlert({
      message: 'This is a <b>default</b> message.'
    });
  });

  // Success
  $('#success-alert').click(function () {
    $('#alert-container').bootstrapAlert({
      type: 'success',
      message: 'This is a <b>success</b> message.'
    });
  });

  // Info
  $('#info-alert').click(function () {
    $('#alert-container').bootstrapAlert({
      type: 'info',
      message: 'This is a <b>info</b> message.'
    });
  });

  // Warning
  $('#warning-alert').click(function () {
    $('#alert-container').bootstrapAlert({
      type: 'warning',
      message: 'This is a <b>warning</b> message.'
    });
  });

  // Danger
  $('#danger-alert').click(function () {
    $('#alert-container').bootstrapAlert({
      type: 'danger',
      message: 'This is a <b>danger</b> message.'
    });
  });

  // With Heading
  $('#alert-heading').click(function () {
    $('#alert-container').bootstrapAlert({
      heading: 'My heading',
      message: 'This is a <b>info</b> message with heading.'
    });
  });

  // Without clear
  $('#alert-no-clear').click(function () {
    $('#alert-container').bootstrapAlert({
      clear: false,
      message: 'This is a <b>info</b> message without clear container.'
    });
  });

  // With glyphicons
  $('#alert-glyphicons').click(function () {
    var glyphicon = '<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>';
    $('#alert-container').bootstrapAlert({
      message: glyphicon + ' This is a message with glyphicons, Font Awesome can be used also.'
    });
  });
</script>

Options