Alert-Dismissible Not Working | Fix Close Button Fast

How Dismissible Alerts Work In Bootstrap

Bootstrap alerts give users short status messages with a color that matches the situation, such as success, warning, or danger. When you add dismiss behavior, the alert shows a close button that hides the element without a page reload.

The pattern is the same in Bootstrap 4 and 5. You wrap your message in a div with classes like alert, a color class such as alert-success, and for dismiss behavior you add alert-dismissible plus a close button. The button carries an attribute that tells the Bootstrap JavaScript plugin to remove the element.

Here is a minimal example that works with Bootstrap 5 when the JavaScript bundle is loaded correctly:

Heads up! Your profile is almost ready.
  

The attributes on that block carry meaning beyond styling. The role="alert" hook tells assistive technology that the message matters, and the close button includes an aria-label string so that screen reader users understand what the control will do.

When everything is wired properly, clicking the button triggers Bootstrap’s alert plugin, removes the alert from the page, and the rest of the layout closes the gap smoothly.

Alert-Dismissible Not Working In Bootstrap 4 And 5

When you see Alert-Dismissible Not Working in your own project, the root cause usually comes down to one of a handful of setup problems. The markup looks fine at a glance, yet the alert stays on the page, or the close icon does nothing.

In practice, most failures fall into patterns that repeat across projects. You can treat them as a short checklist instead of a guessing game. The table below sums up the most common causes for a dismissible alert that refuses to close.

If you methodically test each row in real code, you can usually fix this alert bug in a few minutes instead of poking at CSS or reloading the page over and over.

A quick way to apply that table is to copy a working snippet from the official Bootstrap documentation, drop it into a blank test page that uses your own CSS and JavaScript pipeline, and adjust one element at a time until the close button breaks. The first change that fails often points directly to the actual root cause.

Check Your Bootstrap Files And Script Order

Before you change any markup, confirm that the Bootstrap JavaScript code that powers alerts is actually on the page. The CSS file alone only draws the alert box; the dismiss behavior lives in the JavaScript plugin.

With Bootstrap 5, the easiest path is to load the compiled bundle that includes Popper and all plugins near the end of the document, right before the closing body tag. A typical setup looks like this when you use a content delivery network:

Check the browser developer tools and verify that the script request returns a 200 status. If the file fails to load, no dismiss button on the page can work, no matter how clean the HTML looks.

Script order also matters. If you are on Bootstrap 4 with jQuery, the jQuery script must load before the Bootstrap script, and you should avoid pulling in different Bootstrap versions on the same page. A safe order for Bootstrap 4 looks like this:

Once the files are in place, open the console and type bootstrap in a Bootstrap 5 project or $.fn.alert in a Bootstrap 4 project. If you see an object instead of an error, the plugin is loaded and ready.

Fix Data Attributes On The Close Button

Many reports about a broken dismiss button come from a small mismatch between the Bootstrap version in use and the attribute on the close button. Bootstrap 4 expects data-dismiss="alert", while Bootstrap 5 expects data-bs-dismiss="alert", with a short prefix on the attribute name.

Start by checking which major version of Bootstrap your project uses. You can read the version from the CSS or JS file path, or log bootstrap.Tooltip.VERSION in the console on Bootstrap 5. Then match the close button markup to that version.

Markup For Bootstrap 4

Heads up! This alert uses Bootstrap 4.
  ×

Markup For Bootstrap 5

Heads up! This alert uses Bootstrap 5.
  

Do not mix the older data-dismiss attribute with Bootstrap 5 scripts. That combination leaves the close icon visible, yet the plugin never receives the signal to hide the alert.

While you are in the markup, confirm that the outer element includes the alert and color class, and that the extra alert-dismissible class is present. The plugin targets alerts by class name, so a stray typo can block the click handler from firing.

Handle Dynamic Or JavaScript-Rendered Alerts

In many modern stacks, alerts come from JavaScript instead of static HTML. React, Vue, Angular, and template engines all mount and remove nodes on the fly. When this alert problem only appears on dynamic messages, the issue usually lies in how the elements are created or mounted.

Bootstrap 5 offers both data attributes and direct JavaScript calls. When you inject markup into the page, you can either keep using the data attribute pattern or create the alert instance in code. Both paths work, as long as the nodes end up in the document and the plugin runs after insertion.

In React or Vue, it helps to keep responsibility clear. Let Bootstrap own the actual removal of the DOM node, while the component only decides whether the alert should be rendered at all. If the component also tries to hide the element through conditional rendering, the button click might race with that logic.

Using Data Attributes With Injected HTML

If your code inserts a chunk of HTML into the page, keep the close button markup the same as you would in a static template. After insertion, confirm that the new node sits inside the same document where Bootstrap was loaded, and that no shadow DOM boundary hides it from the plugin.

Creating Alerts With JavaScript

Bootstrap also exposes a small JavaScript API for alerts. This pattern is handy when you want to control the lifecycle of the message directly:

const alertNode = document.querySelector('#status-alert');
const alertInstance = new bootstrap.Alert(alertNode);

// Later, when a request finishes:
alertInstance.close();

With this style, you do not need a data-bs-dismiss attribute at all. The call to alertInstance.close() removes the element by hand, which avoids clashes with virtual DOM code.

• Decide who removes the node — Pick Bootstrap or your component state as the single source of truth for hiding the alert.
• Keep markup predictable — Give each alert a stable id or ref so that JavaScript can reach the right element when you close it.
• Clean up after navigation — When your app changes route, make sure old alerts do not linger in detached DOM containers.

If your UI layer already controls visibility through state, decide whether Bootstrap should remove the node, or your component logic should hide it. Mixing both approaches can leave the close button wired to one state while the UI layer expects another.

Check For Conflicts And Console Errors

When the close button still fails, open the browser console and scan for red error messages. A single script error earlier in the bundle can stop the Bootstrap alert plugin from attaching to the buttons that use data attributes.

Look for messages about missing exports, duplicate copies of jQuery, or multiple Bootstrap versions loaded at once. Any of those can break dismiss behavior in subtle ways, especially on older projects that carried code forward over several releases.

Here are practical checks that help isolate those problems quickly:

• Temporarily remove custom scripts — Comment out local JavaScript files, reload, and test the alert again. If it works now, reintroduce scripts one by one until the failure returns.
• Check for multiple Bootstrap bundles — Search your HTML for bootstrap.min.js and verify that only one major version loads.
• Match CSS and JS versions — Use the same major and minor version numbers for the CSS link and the JavaScript bundle.
• Disable third party UI plugins — Turn off plugins that manipulate DOM elements near alerts, then test the close button again.

Once the console runs clean and only a single, correct Bootstrap bundle remains, most dismiss issues tied to conflicts disappear.

When the bug still feels stubborn, set a breakpoint on the close button click handler, either through the browser devtools event listener breakpoints panel or by adding a short logging statement. Seeing exactly which handler runs when you click the icon helps you confirm whether Bootstrap is in control.

Debug Checklist For Dismissible Alert Issues

When a teammate reports Alert-Dismissible Not Working on a page, walk through the same short checklist every time. This tight loop keeps you from chasing CSS or server code when the fault lives in front end setup.

• Confirm Bootstrap JavaScript is loaded — Check the network panel, then test console access to the alert plugin.
• Match data attributes to the Bootstrap version — Use data-dismiss on Bootstrap 4, and data-bs-dismiss on Bootstrap 5.
• Verify alert classes on the container — Ensure alert, a contextual class, and alert-dismissible are present and spelled correctly.
• Test a minimal static example — Place a simple alert snippet on an otherwise empty page to rule out layout and plugin conflicts.
• Check dynamic rendering paths — For alerts created in JavaScript, confirm that the nodes mount inside the main document and that visible state is not fighting with Bootstrap’s removal behavior.
• Review console errors and remove conflicts — Fix script errors and drop duplicate or outdated bundles.

Once you work through that list, you can usually retire that alert bug from your issue tracker and ship a smooth dismiss experience that behaves the same way across browsers and devices.

As a final small habit, keep a tiny HTML page in your repository with a single dismissible alert wired against your current Bootstrap setup. When a new teammate updates dependencies or build tooling, that page gives you a fast smoke test for alert behavior before changes reach production.

That habit keeps alert behavior predictable across codebases, new hires, and feature branches, which helps maintain calm releases even under pressure.

Send us your feedbackTell us what you thought about this post

Name * Email *

Your comment *

Quick check — what is …? *

Send feedback