Alerts – 8 Free CSS, Bootstrap & Tailwind Sets
A pack of eight sets of alerts, banners, callouts and toast notifications, designed and maintained in-house by uiCookies. Every set comes three ways: a Bootstrap 5.3.8 version built on Bootstrap's own .alert, .toast, .card and .btn-close with the Alert and Toast plugins where they fit, a plain CSS version with no dependencies, and a Tailwind CSS 4 version written in utility classes. The three look the same, so pick the one that matches your stack and copy the marked snippet.
A good alert says what happened and what to do next in words, not only in colour, and it interrupts only when it has to. That means keeping role="alert" for urgent messages and using a polite live region for toasts, naming every dismiss button, and linking an error summary to the fields it describes. Toasts should pause while the pointer or keyboard focus is on them, errors and toasts with an Undo button should stay long enough to be used, and closing one should not drop keyboard users back at the top of the page. Animation should stop when the reader prefers reduced motion.
