EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Alert Components

1. Course Introduction

(1) Prerequisites

(2) 🎯 What You Will Learn

(3) Pain Point

Charlie is developing a ticket submission feature: a green alert box for successful submission, a red one for failure, a Toast that automatically disappears after a few seconds, and a Tooltip with explanations on hover for action buttons.

(4) Solution

Users need immediate feedback after an action—successful submission, failed save, deletion confirmation, or action prompts. Bootstrap provides three different levels of feedback components: alerts, toasts, and tooltips.

Understanding: Alert = Fixed-position feedback within the page, Toast = Temporary notification that pops up in a corner, Tooltip = Text hint that appears on mouse hover.

(5) Benefits

Using Bootstrap's feedback components provides the perfect user feedback experience for different scenarios.

2. Alerts

▶ Example: Alert Basics

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alert Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-primary" role="alert">Primary alert - a simple info message.</div>
    <div class="alert alert-success" role="alert">Success - your changes have been saved.</div>
    <div class="alert alert-danger" role="alert">Danger - something went wrong.</div>
    <div class="alert alert-warning" role="alert">Warning - please check your input.</div>
    <div class="alert alert-info" role="alert">Info - new updates are available.</div>

    <div class="alert alert-warning alert-dismissible fade show" role="alert">
      <strong>Notice!</strong> This alert can be dismissed.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <div class="alert alert-success" role="alert">
      <h4 class="alert-heading">Well done!</h4>
      <p>Your account has been created successfully.</p>
      <hr>
      <p class="mb-0">Check your email for verification link.</p>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

(1) Alert Colors

Class Semantic Usage
alert-primary Blue General information
alert-success Green Successful operation
alert-danger Red Error/Failure
alert-warning Yellow Warning/Attention
alert-info Cyan Informational message

(2) Dismissible Alert

HTML 
<div class="alert alert-danger alert-dismissible fade show" role="alert">
  <strong>Error!</strong> Please fix the highlighted fields.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default. Key: alert-dismissible makes space for the close button, btn-close is the close button itself, and data-bs-dismiss="alert" triggers the dismissal.

3. Toast

HTML 
<button class="btn btn-primary" onclick="showToast()">Show Toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert">
    <div class="toast-header">
      <strong class="me-auto">Notification</strong>
      <small>just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

<script>
  function showToast() {
    var toast = new bootstrap.Toast(document.getElementById('liveToast'))
    toast.show()
  }
</script>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

(1) Toast Structure

Element Class Description
Container toast-container Positioned in the screen corner
Toast toast Individual toast card
Header toast-header Icon + Title + Time
Body toast-body Message content

(2) Toast Configuration

HTML 
<div class="toast" data-bs-delay="3000">Auto-hide after 3 seconds</div>
<div class="toast" data-bs-autohide="false">No auto-hide (user must close)</div>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

4. Tooltips

HTML 
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
        title="Tooltip on top">Top tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right"
        title="Tooltip on right">Right tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"
        title="Tooltip on bottom">Bottom tooltip</button>
<button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left"
        title="Tooltip on left">Left tooltip</button>

<script>
  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  var tooltipList = tooltipTriggerList.map(function(el) {
    return new bootstrap.Tooltip(el)
  })
</script>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

5. Popovers

HTML 
<button class="btn btn-lg btn-danger" data-bs-toggle="popover"
        title="Popover Title"
        data-bs-content="This is the popover body content.">
  Click to toggle popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

6. More Alert Component Examples

▶ Example: Dismissible Alerts Full Demo

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dismissible Alerts</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <strong>Success!</strong> Your changes have been saved.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      <strong>Error!</strong> Please check your input and try again.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </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"></button>
    </div>
    <div class="alert alert-info alert-dismissible fade show" role="alert">
      <strong>Heads up!</strong> New software update is available.
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

▶ Example: Toast Notification Center

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Toast Notifications</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <button class="btn btn-success" onclick="showSuccessToast()">Success Notification</button>
    <button class="btn btn-danger" onclick="showErrorToast()">Error Notification</button>

    <div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1080;">
      <div id="successToast" class="toast" role="alert">
        <div class="toast-header text-white bg-success">
          <strong class="me-auto">✅ Success</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Your data has been saved successfully!
        </div>
      </div>
      <div id="errorToast" class="toast" role="alert">
        <div class="toast-header text-white bg-danger">
          <strong class="me-auto">❌ Error</strong>
          <small>just now</small>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
          Something went wrong. Please try again.
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function showSuccessToast() {
      new bootstrap.Toast(document.getElementById('successToast')).show();
    }
    function showErrorToast() {
      new bootstrap.Toast(document.getElementById('errorToast')).show();
    }
  </script>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

▶ Example: Tooltips (All Directions)

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tooltip Directions</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-5 text-center">
    <div class="mb-4">
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
        Top
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
        Right
      </button>
      <button class="btn btn-secondary me-2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
        Bottom
      </button>
      <button class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
        Left
      </button>
    </div>
    <div>
      <button class="btn btn-outline-info" data-bs-toggle="tooltip" data-bs-html="true"
              title="<em>Rich</em> <b>Tooltip</b>">
        HTML Tooltip
      </button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function(el) {
      return new bootstrap.Tooltip(el)
    })
  </script>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

▶ Example: Popover with HTML Content

HTML 
<button class="btn btn-lg btn-primary me-2" data-bs-toggle="popover"
        title="Profile Info"
        data-bs-content="<strong>Alice Chen</strong><br>Senior Designer<br><span class='badge bg-success'>Online</span>"
        data-bs-html="true">
  HTML Popover
</button>

<button class="btn btn-lg btn-outline-danger me-2" data-bs-toggle="popover"
        title="Delete Confirmation"
        data-bs-content="Are you sure? This action cannot be undone."
        data-bs-trigger="focus">
  Focus Popover
</button>

<button class="btn btn-lg btn-secondary" data-bs-toggle="popover"
        title="Notification"
        data-bs-content="You have 3 unread messages."
        data-bs-placement="bottom">
  Bottom Popover
</button>

<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function(el) {
    return new bootstrap.Popover(el)
  })
</script>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

(1) Notification Component Selection Flow

100% 
flowchart TD
    A[Need to notify user] --> B{Message importance}
    B -->|High/Immediate attention| C[Alert]
    B -->|Medium/Needs confirmation| D[Popover]
    B -->|Low/Temporary| E[Toast]
    C --> F{Requires user action?}
    F -->|Yes| G[Dismissible alert-dismissible]
    F -->|No| H[Static alert]
    E --> I{Auto-hide?}
    I -->|Yes| J[Default 5 seconds]
    I -->|No| K[data-bs-autohide=false]
    D --> L{Trigger method}
    L -->|Hover| M[Tooltip]
    L -->|Click| N[Popover]

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousel, collapse, etc.). The page uses the default Bootstrap theme (light) and responsive grid by default.

Alert Color Class Semantic Usage Scenario
Blue alert-primary Information System announcements, tips
Green alert-success Success Operation complete, save successful
Red alert-danger Error Operation failed, exception
Yellow alert-warning Warning Expiring soon, attention
Cyan alert-info Tip New features, update notifications
Toast Config Attribute Effect
Auto-hide data-bs-autohide="true" Default, disappears after a few seconds
Manual close data-bs-autohide="false" User must click to close
Delay time data-bs-delay="3000" Disappears after 3 seconds (milliseconds)
Animation enabled class="toast fade" Fade in/out animation
Position container toast-container + positioning Fixed in screen corner
Comparison Dimension Tooltip Popover
Trigger method Hover Click
Content volume Small amount of text Title + Body + HTML
Direction top/right/bottom/left Same as left
HTML support Requires data-bs-html="true" Requires data-bs-html="true"
Close method Disappears when moved away Click again or press Esc
Typical scenario Icon descriptions, abbreviation explanations Form hints, detail previews

❓ Frequently Asked Questions

Q Why isn't my Tooltip showing?
A The most common reason: the JavaScript wasn't initialized! Tooltips do not work automatically; you must execute new bootstrap.Tooltip(element) or the batch initialization code.
Q What is the role="alert" in an Alert for?
A It's an accessibility attribute that tells screen readers this is an important message. It's recommended to always include it.
Q What scenarios are Toast and Alert each suitable for?
A Toast is suitable for passive, low-disturbance notifications—it doesn't block user actions and disappears automatically after a few seconds. Alert is suitable for information that requires the user's attention—it stays on the page until the user closes it.
Q Will multiple Toasts stack when they appear at the same time?
A Yes. Multiple Toasts will stack vertically in the toast-container in the order they appear, with the newest on top. Each Toast has its own independent timer and does not affect others.
Q Will the role="alert" in an alert box interrupt the current reading in a screen reader?
A Yes. role="alert" is a live region, and most screen readers will immediately read its content, interrupting whatever else is being read. This is exactly the intended effect for alerts. If you want to lower the disturbance level, using Toast is recommended.

📖 Summary

📝 Assignment

  1. ⭐ Create a form submission feedback flow: display a green dismissible Alert for successful submission, and a red Alert for failed submission.
  2. ⭐⭐ Implement a "New Message Notification" with Toast: clicking a button triggers a Toast that displays "New message from Alice" and automatically disappears after 3 seconds.
  3. ⭐⭐⭐ Place 5 social media link icon buttons on a page. Each button's Tooltip should display the corresponding platform name, with the direction consistently set to bottom.

Previous Lesson: Carousel and Modal · Next Lesson: Accordion

Web-Tutorial.com

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏