Bootstrap Alerts: Colors, Dismissible Alerts and Icons

A Bootstrap alert is a colored box with a short message: a confirmation that something saved, a warning before a risky action, or an error that stops a form. Alerts are plain markup, with an optional close button powered by Bootstrap’s JavaScript. This guide covers the colors, links and headings inside alerts, dismissible alerts, icons, showing alerts from JavaScript, accessibility, and styling. Everything is for Bootstrap 5.3.

A basic alert

<div class="alert alert-success" role="alert">
  Your changes were saved.
</div>

.alert sets the padding, border, and rounded corners, and alert-success sets the colors. role="alert" makes screen readers announce the message when it appears; for alerts that are on the page from the start, you can leave it out.

Colors

<div class="alert alert-primary" role="alert">A new version is available.</div>
<div class="alert alert-secondary" role="alert">This project is archived.</div>
<div class="alert alert-success" role="alert">Payment received.</div>
<div class="alert alert-danger" role="alert">We couldn't charge your card.</div>
<div class="alert alert-warning" role="alert">Your trial ends in 3 days.</div>
<div class="alert alert-info" role="alert">Maintenance is planned for Sunday.</div>
<div class="alert alert-light" role="alert">You have no notifications.</div>
<div class="alert alert-dark" role="alert">Read-only mode.</div>

Alert colors are light tints that keep text readable, and they adjust themselves in dark mode. Don’t rely on color alone: start the message with words that say what kind it is, or add an icon.

Links, headings, and longer content

<div class="alert alert-warning" role="alert">
  <h4 class="alert-heading">Your trial ends in 3 days</h4>
  <p>After that, your projects become read-only until you pick a plan.</p>
  <hr>
  <p class="mb-0"><a href="/billing" class="alert-link">Choose a plan</a> to keep editing.</p>
</div>

• alert-link gives links a matching, bolder color.
• alert-heading styles a heading for the alert.
• <hr> inside an alert takes the alert’s border color.

Dismissible alerts

Add a close button so people can hide the alert:

<div class="alert alert-info alert-dismissible fade show" role="alert">
  We've updated our privacy policy.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

• alert-dismissible makes room for the button on the right.
• fade show adds a fade-out animation when it closes.
• data-bs-dismiss="alert" wires the button to Bootstrap’s alert plugin, so load bootstrap.bundle.min.js or bootstrap.min.js.

Closing removes the alert from the page. To remember that someone dismissed it, for example a site-wide announcement, store a flag in localStorage and don’t render it next time.

Alerts with icons

Use Bootstrap Icons and a flex layout to put an icon beside the text:

<div class="alert alert-danger d-flex align-items-center gap-2" role="alert">
  <i class="bi bi-exclamation-triangle-fill flex-shrink-0" aria-hidden="true"></i>
  <div>We couldn't charge your card. Update your payment method.</div>
</div>

flex-shrink-0 stops the icon from shrinking on narrow screens, and aria-hidden="true" hides it from screen readers, since the text already says it all.

Show an alert with JavaScript

To show a message after an action, such as a form submit, insert the alert into a placeholder:

<div id="alert-area"></div>

function showAlert(message, type = 'success') {
  const area = document.querySelector('#alert-area')
  const alert = document.createElement('div')
  alert.className = `alert alert-${type} alert-dismissible fade show`
  alert.setAttribute('role', 'alert')
  alert.innerHTML = '<span></span><button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>'
  alert.querySelector('span').textContent = message
  area.append(alert)
}

showAlert('Profile updated.')
showAlert('Something went wrong. Please try again.', 'danger')

The message goes in with textContent, so text from users or an API can’t inject HTML. To close an alert from code, call bootstrap.Alert.getOrCreateInstance(element).close(); the close.bs.alert and closed.bs.alert events fire as it closes.

Alert or toast?

Use an alert when the person needs to read or act on the message. Errors that stop a form belong next to the form, or next to each field with the form validation styles.

Accessibility

• role="alert" interrupts screen readers, so use it for messages added after the page loads that need attention. For a quieter announcement, such as “Saved”, use role="status" instead.
• Don’t auto-dismiss important alerts. If an alert closes itself after a few seconds, some people won’t have time to read it.
• Move focus to serious errors, for example by giving a form error alert tabindex="-1" and calling .focus() on it after submit.

Style alerts

Alerts use CSS variables:

.alert {
  --bs-alert-border-radius: .75rem;
  --bs-alert-padding-x: 1.25rem;
  --bs-alert-padding-y: 1rem;
}
.alert-brand {
  --bs-alert-color: #1e3a8a;
  --bs-alert-bg: #eef2ff;
  --bs-alert-border-color: #c9d4ff;
  --bs-alert-link-color: #1e3a8a;
}

Use alert alert-brand for a custom color. In Sass, $alert-padding-y, $alert-padding-x, $alert-border-radius, and $alert-link-font-weight set the defaults, and alerts for custom theme colors you add in Sass are generated automatically; see how to customize Bootstrap 5 colors.

FAQ

How do I make an alert in Bootstrap 5?

Add <div class="alert alert-success" role="alert">Your message</div>. Swap success for primary, danger, warning, info, secondary, light, or dark to change the color.

How do I make a Bootstrap alert closable?

Add alert-dismissible fade show to the alert and a <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> inside it. Bootstrap’s JavaScript must be loaded for the button to work.

How do I show a Bootstrap alert with JavaScript?

Create a div with the alert classes and role="alert", set its text with textContent, and append it to a placeholder element on the page. Close it later with bootstrap.Alert.getOrCreateInstance(element).close().

How do I add an icon to a Bootstrap alert?

Add d-flex align-items-center gap-2 to the alert and put an icon, such as <i class="bi bi-check-circle-fill flex-shrink-0" aria-hidden="true"></i>, before a div holding the text.

What is the difference between a Bootstrap alert and a toast?

An alert sits in the page until it’s dismissed and suits errors, warnings, and notices people need to act on. A toast floats in a corner and disappears after a few seconds, which suits short confirmations.