Bootstrap Alerts
Alerts are the colored message boxes Bootstrap uses to give feedback to your users, such as a success confirmation, a warning, or an error. In this lesson you will learn how to build an alert, apply the eight contextual colors, add links and extra content, and make an alert dismissible with a close button and Bootstrap's JavaScript.
A basic alert
Every alert starts with the .alert base class plus one contextual class, such as .alert-success. The role="alert" attribute tells assistive technologies that this box carries an important message.
A success alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="alert alert-success" role="alert">
Your changes have been saved successfully.
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>The eight contextual colors
Bootstrap gives you eight alert colors, one for each of its contextual themes. Pick the one whose meaning matches your message so the color reinforces the text.
Several colors at once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="alert alert-warning" role="alert">
Your password will expire in 3 days.
</div>
<div class="alert alert-danger" role="alert">
We could not process your payment.
</div>
<div class="alert alert-info" role="alert">
A new version of the app is available.
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Links and extra content inside alerts
To make a link inside an alert match its color, add the .alert-link class to the anchor. You can also include headings and paragraphs to build a richer message, and use an <hr> to separate them.
An alert with a link and a heading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Your account has been created.</p>
<hr>
<p class="mb-0">Visit your <a href="#" class="alert-link">profile</a> to add more details.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Dismissible alerts
To let users close an alert, add .alert-dismissible, include a button with class .btn-close and data-bs-dismiss="alert", and add the .fade and .show classes so it animates out. This feature needs Bootstrap's JavaScript bundle to be loaded.
A dismissible alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
Check your input before submitting.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>That covers the full range of alerts: pick a color that matches the message, add optional headings and colored links, and turn on the close button whenever the user should be able to dismiss the message themselves.
Exercise: Bootstrap Alerts
What is the purpose of the role="alert" attribute on a Bootstrap alert?
