Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Bootstrap documentation

Success!

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.

Error! This is a dismissable alert!

Warning! Notice how the text/UI have high contrast?


                    <div class="alert alert-success" role="alert">

                      <h4 class="alert-heading">Success!</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>

                    </div>


                    <div class="alert alert-danger alert-dismissible fade show" role="alert">

                      <strong>Error!</strong> This is a dismissable alert!

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

                    </div>


                    <div class="alert alert-warning alert-dismissible fade show" role="alert">

                      <strong>Warning!</strong> Notice how the text/UI have high contrast?

                    </div>