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

ClassWhat It Does
position-relativeOn trigger button for badge
data-bs-auto-close="outside"Keeps dropdown open on inside click
position-absolute.top-0.start-100.translate-middleBadge positioning
overflow-y:autoScrollable 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.

Related Components