Alerts
Alerts provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages. Alerts are available for any length of text, as well as an optional close button. There are eight types of alerts available in Bootstrap 5.
Each of the classes has different colors associated with them.
Class | Description | Syntax |
---|---|---|
Primary | Alert is blue in color.. | .alert-primary |
Secondary | Shows alert in the secondary background color. | .alert-secondary |
Success | Shows the alert green color. | .alert-success |
Danger | Alert is red in color. | .alert-danger |
Warning | Shows the alert in the color yellow | .alert-warning |
Info | Shows the alert in the color light blue. | .alert-info |
Light | Alert is in light gray background color. | .alert-light |
Dark | Shows the alert in dark gray background color. | .alert-dark |
Dismissible | Shows alert with a close button. | .alert-dismissible |
Example Code:
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap 5 | Alerts
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
</head>
<body>
<div style="text-align: center;
width:600px;">
<h1 style="color: green;">
w3wiki
</h1>
</div>
<div id="canvas" style="width: 600px;
height: 200px; margin: 20px;">
<div class="alert alert-primary" role="alert">
Primary Alert
<div class="alert alert-secondary" role="alert">
Secondary Alert
</div>
<div class="alert alert-success" role="alert">
Success Alert
</div>
<div class="alert alert-danger" role="alert">
Danger Alert
</div>
<div class="alert alert-warning" role="alert">
Warning Alert
</div>
<div class="alert alert-info" role="alert">
Info Alert
</div>
<div class="alert alert-light" role="alert">
Light Alert
</div>
<div class="alert alert-dark" role="alert">
Dark Alert
</div>
</div>
</body>
</html>
Bootstrap Cheat Sheet – A Basic Guide to Bootstrap
Bootstrap is a free, open-source, potent CSS framework and toolkit used to create modern and responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. Nowadays, websites are perfect for all browsers and all sizes of screens.
Contact Us