Bootstrap 5 notification bell dropdowns for admin dashboards. This page covers 4 patterns — basic list, grouped by type, interactive mark-as-read and dark theme.
Key Classes
| Class | What It Does |
|---|---|
position-relative | On trigger button for badge |
data-bs-auto-close="outside" | Keeps dropdown open on inside click |
position-absolute.top-0.start-100.translate-middle | Badge positioning |
overflow-y:auto | Scrollable notification list |
1. Basic Bootstrap 5 Notification Bell
Notification bell with unread count badge and dropdown list of notifications.
2. Bootstrap 5 Grouped Notifications
Notifications grouped by type — Sales, Reviews and System — with category icons.
3. Bootstrap 5 Interactive Mark-as-Read Notifications
Notification panel where clicking an item marks it as read and updates the badge count.
4. Bootstrap 5 Dark Notification Panel
Dark themed notification dropdown — matches dark admin dashboard navbars.
Frequently Asked Questions
Use a Bootstrap dropdown with data-bs-auto-close='outside' so it stays open when clicking inside. Style the dropdown-menu with a fixed width (300-360px), overflow-y:auto and max-height for scrolling. Add a badge on the trigger button for unread count.
Make the bell button position:relative. Add a span with position:absolute top-0 start-100 translate-middle badge rounded-pill bg-danger. Update the count with JavaScript: badge.textContent = unreadCount.
Track unread state with a data attribute or CSS class. On click, remove the highlight background and unread dot, decrement the counter, and update the badge. Use data-bs-auto-close='outside' on the dropdown so it stays open after clicking an item.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.