Bootstrap Alerts Explained — Feedback Messages

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Bootstrap Alerts Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap alerts provide contextual feedback messages for user actions, with dismissible option, semantic colors, and support for rich content like headings, links, and icons.

What You'll Learn

Alert color variants
Dismissible alerts
Alert links
Icons and additional content
JavaScript alert dismissal

Why It Matters

Alerts communicate important feedback (success, error, warning, info) after user actions. Bootstrap alerts are accessible with ARIA roles and keyboard dismissible.

<div class="container mt-4">
  <div class="alert alert-primary" role="alert">
    A simple primary alert with <a href="#" class="alert-link">an example link</a>.
  </div>
  <div class="alert alert-secondary" role="alert">
    A simple secondary alert.
  </div>
  <div class="alert alert-success" role="alert">
    <i class="bi bi-check-circle me-2"></i>Your changes have been saved successfully!
  </div>
  <div class="alert alert-danger" role="alert">
    <h4 class="alert-heading">Error!</h4>
    <p>Something went wrong. Please try again later.</p>
    <hr>
    <p class="mb-0">Error code: 500 - Internal Server Error</p>
  </div>
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Warning!</strong> Your session will expire in 5 minutes.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
  <div class="alert alert-info alert-dismissible fade show" role="alert">
    <i class="bi bi-info-circle me-2"></i>New updates are available.
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  <div class="alert alert-light border" role="alert">
    Light alert with custom border.
  </div>
  <div class="alert alert-dark" role="alert">
    Dark alert.
  </div>
</div>

Expected output: All alert variants: contextual colors, dismissible with close button, alert with link, rich content with heading, and icon support.

← Previous Bootstrap Carousel Explained — Image Sliders and Slideshows Next → Bootstrap Badges Explained — Labels and Count Indicators

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap