MENU


Alert

An alert displays a message.


RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

    <div class="alert alert-primary" role="alert">blue</div>
    <div class="alert alert-secondary" role="alert">gray</div>
    <div class="alert alert-success" role="alert">green</div>
    <div class="alert alert-danger" role="alert">red</div>
    <div class="alert alert-warning" role="alert">yellow</div>
    <div class="alert alert-info" role="alert">lightblue</div>
    <div class="alert alert-light" role="alert">white</div>
    <div class="alert alert-dark" role="alert">darkgray</div>

</body><html>
You can include more complex content in an alert. You can even include a 'dismiss' button (X).
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

    <div class="alert alert-success" role="alert">
        <button type="button" class="btn-close" data-dismiss="alert" aria-label="Close">
        </button>
        <h4 class="alert-heading">Well done!</h4>
        <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
        <hr>
        <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
    </div>

</body><html>

JavaScript:

var myAlert = document.getElementById('myAlert'); var alert = new bootstrap.Alert(myAlert);alert.close(); alert.dispose(); alert.getInstance();var myAlert = document.getElementById('myAlert'); myAlert.addEventListener('close.bs.alert', function () { /*...*/ }); myAlert.addEventListener('closed.bs.alert', function () { // do something, for instance, explicitly move focus to the most appropriate element, so it doesn't get lost/reset to the start of the page // document.getElementById('...').focus(); });