Bootstrap 5 alerts provide contextual feedback messages for user actions. This page covers 4 alert patterns — basic colors, dismissible, with icons and custom styled — each ready to copy into your project.

Quick Setup

Dismissible alerts require Bootstrap 5 JS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Key Classes Reference

ClassWhat It Does
.alertRequired base class
.alert-successGreen success alert
.alert-dangerRed error alert
.alert-warningYellow warning alert
.alert-infoBlue info alert
.alert-primaryBrand blue alert
.alert-dismissibleAdds space for close button
.fade.showEnables fade animation on dismiss
.alert-linkStyles links inside alerts
data-bs-dismiss="alert"Closes alert on button click

1. Bootstrap 5 Basic Alerts

All Bootstrap 5 alert color variants — success, info, warning, danger, primary, secondary, light and dark.

2. Bootstrap 5 Dismissible Alerts

Alerts with a close button using alert-dismissible and data-bs-dismiss. Requires Bootstrap JS.

3. Bootstrap 5 Alerts with Icons

Alerts with Bootstrap Icons for a more visual and professional look.

4. Bootstrap 5 Custom Styled Alerts

Custom alerts with modern styling, icons and action buttons — great for onboarding and notification banners.

Frequently Asked Questions

Add alert-dismissible and fade show classes to the alert div. Add a button with class btn-close and data-bs-dismiss='alert' inside the alert. This requires Bootstrap JS bundle to be loaded.
Create the alert element with the alert class and add it to the DOM, or toggle a hidden alert using display. To auto-dismiss: setTimeout(() => { const alert = bootstrap.Alert.getOrCreateInstance(el); alert.close(); }, 3000).
Add d-flex align-items-center gap-2 to the alert div. Then add an icon element (Bootstrap Icons, Font Awesome SVG) before your text. The icon aligns vertically with the alert text automatically.
Add position-fixed and a corner position class to the alert: class='alert alert-success position-fixed bottom-0 end-0 m-3'. Set a z-index higher than other content: style='z-index:1055'. This is often used for toast-style notifications.
Use the built-in variants: alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark. For custom colors override with CSS: .alert-custom { background: #your-color; border-color: #border-color; color: #text-color; }

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Toast Notification

View examples →

Bootstrap 5 Modal Example

View examples →

Bootstrap 5 Badge Example

View examples →