How do I create a dismissible alert that persists across page reloads?

Asked on Sep 16, 2025

1 Answer

To create a dismissible alert that persists across page reloads, you can use Bootstrap's alert component along with JavaScript and localStorage to remember the dismissed state.

<!-- BEGIN COPY / PASTE -->
        <div id="myAlert" class="alert alert-warning alert-dismissible fade show" role="alert">
            This is a dismissible alert that persists across reloads.
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const alertElement = document.getElementById('myAlert');
                const alertDismissed = localStorage.getItem('alertDismissed');

                if (alertDismissed) {
                    alertElement.style.display = 'none';
                }

                alertElement.addEventListener('close.bs.alert', function() {
                    localStorage.setItem('alertDismissed', 'true');
                });
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

The alert is initially displayed using Bootstrap's alert component with the `fade` and `show` classes.
JavaScript checks localStorage for a `alertDismissed` key to determine if the alert should be hidden.
When the alert is dismissed, an event listener sets the `alertDismissed` key in localStorage to `true`.
This setup ensures that the alert remains dismissed across page reloads.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions