Bootstrap Alerts
Introduction
Bootstrap 5 Alerts are a component used to provide contextual feedback messages for typical user actions. These alerts are designed to be flexible and customizable, offering various styles to indicate the type of message being displayed.Basic Usage
To create an alert, you use the.alertclass along with a contextual class to specify the type of alert.<div class="alert alert-primary" role="alert"> This is a primary alert—check it out! </div>Contextual Classes
Bootstrap provides several contextual classes to denote different types of alerts,
alert-primary: Used for important primary messages.
alert-secondary: Used for secondary messages.
alert-success: Indicates a successful or positive action.
alert-danger: Indicates a dangerous or potentially negative action.
alert-warning: Indicates a warning that might need attention.
alert-info: Used for informational messages.
alert-light: Used for light background messages.
alert-dark: Used for dark-themed messages.<div class="alert alert-success" role="alert"> This is a success alert—check it out! </div>Dismissible Alerts
Alerts can be made dismissible by adding the.alert-dismissibleand.fadeclasses along with a close button.<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>Additional Customization
You can include additional content like headings, paragraphs, and links within alerts.<div class="alert alert-info" 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>Example Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Alerts</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <div class="alert alert-primary" role="alert"> This is a primary alert—check it out! </div> <div class="alert alert-secondary" role="alert"> This is a secondary alert—check it out! </div> <div class="alert alert-success" role="alert"> This is a success alert—check it out! </div> <div class="alert alert-danger" role="alert"> This is a danger alert—check it out! </div> <div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Warning!</strong> Better check yourself, you're not looking too good. <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <div class="alert alert-info" role="alert"> This is an info alert—check it out! </div> <div class="alert alert-light" role="alert"> This is a light alert—check it out! </div> <div class="alert alert-dark" role="alert"> This is a dark alert—check it out! </div> </div> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.bundle.min.js"></script> </body> </html>This example demonstrates how to implement different types of alerts using Bootstrap 5. The alerts are responsive and can be customized further with additional CSS or JavaScript as needed.