<div role="alert" class="alert alert-primary">A simple primary alert—check it out!</div>
    <div role="alert" class="alert alert-secondary">A simple secondary alert—check it out!</div>
    <div role="alert" class="alert alert-success">A simple success alert—check it out!</div>
    <div role="alert" class="alert alert-danger">A simple danger alert—check it out!</div>
    <div role="alert" class="alert alert-warning">A simple warning alert—check it out!</div>
    <div role="alert" class="alert alert-info">A simple info alert—check it out!</div>
    <div role="alert" class="alert alert-light">A simple light alert—check it out!</div>
    <div role="alert" class="alert alert-dark">A simple dark alert—check it out!</div>
    

    <div class="alert alert-primary" role="alert">
        A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-secondary" role="alert">
        A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-success" role="alert">
        A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-danger" role="alert">
        A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-warning" role="alert">
        A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-info" role="alert">
        A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-light" role="alert">
        A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-dark" role="alert">
        A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    

    <div class="alert alert-success" role="alert">
        <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>
    

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    

var alertList = document.querySelectorAll('.alert')
    alertList.forEach(function (alert) {
        new bootstrap.Alert(alert)
    })
    

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

var myAlert = document.getElementById('myAlert')
    var bsAlert = new bootstrap.Alert(myAlert)
    

var alertNode = document.querySelector('.alert')
    var alert = bootstrap.Alert.getInstance(alertNode)
    alert.close()
    

var myAlert = document.getElementById('myAlert')
    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()
    })