Skip to content

Notification List with Read and Unread States

Bootstrap 5 notification list with highlighted unread items, unread counter, All/Unread filter, per-item read toggle and a mark-all-read button.

Also known as: notification center, unread notifications list, notification dropdown, mark all as read, notification panel

Bootstrap 5 Lists Responsive #badge #list #notifications #responsive #unread

Notification List with Read and Unread States live demo

Open in new tab

Bootstrap 5 code (HTML, CSS, JS)

A Bootstrap 5 notification list with highlighted unread items, a live unread counter, an All / Unread filter and a "Mark all as read" action. Use it as a notification center page, inside a header dropdown or in the sidebar of a dashboard or social app.

How it works

The panel is a Bootstrap card with the class .nl-panel, wrapped in .nl-wrap for the soft violet background. The header holds the title, the .nl-count badge, the .nl-mark-all button and a segmented filter built from two btn-check radio inputs. Notifications are grouped in .nl-group blocks ("Today", "Earlier"). Each li.nl-item is a three-column grid: an avatar photo (.nl-avatar) or an icon circle (.nl-icon), the .nl-link with text, optional quote and time, and a .nl-toggle button showing the unread dot. Unread items carry .is-unread, which adds the tinted background, the inset accent bar on the left, darker text and a filled dot. A pseudo-element on .nl-link makes the whole row clickable.

The script initialises every .nl-panel on DOMContentLoaded and gives each instance unique radio names and ids. Clicking a notification link marks it read; clicking .nl-toggle switches between read and unread. A render() function recounts unread items, updates or hides the badge, disables "Mark all as read" when nothing is unread, applies the current filter, hides empty groups and shows the .nl-empty "You're all caught up" state when no item is visible.

Customization

  • --nl-accent and --nl-accent-soft on .nl-wrap in style.css: change the violet used for the badge, dots, accent bar, times and buttons.
  • --nl-unread-bg: change the background tint of unread rows.
  • --nl-avatar: resize avatars and icon circles (default 44px); the grid column follows.
  • Add or remove .is-unread on any .nl-item to set the initial state; the counter is calculated on load.
  • .nl-icon--warn and .nl-icon--ok: copy one of these modifiers to create more colored icon types for system messages.
  • max-width: 540px in .nl-panel: make the panel narrower for a header dropdown.
  • The event.preventDefault() line in the .nl-link click handler: remove it and set real href values to open each notification.

Use cases

  • Dashboards and admin panels: a notification center page with an unread counter and a Mark all as read button
  • Social and community apps: activity items with avatars and quotes switch between read and unread
  • Header dropdowns: a narrow notification panel that opens from the bell icon in the top bar
  • SaaS products: filter system messages between All and Unread and show an all caught up empty state
  • Sidebars: grouped Today and Earlier notifications keep recent activity easy to scan

Accessibility

The panel is a labelled section. Each link starts with a visually hidden "Unread:" or "Read:" prefix that the script keeps in sync, and the badge includes a hidden "unread" word. The toggle buttons have an aria-label that switches between "Mark as read" and "Mark as unread". The filter is a radiogroup of native radio inputs, so arrow keys work. A visually hidden role="status" region announces every change, and focus moves to the next item or the filter when an item disappears or all items are marked read. Transitions are disabled with prefers-reduced-motion.

Usage notes

Requires Bootstrap 5 (added automatically) and Bootstrap Icons. .nl-wrap is a demo wrapper with min-height: 100vh; drop it when placing the panel in a dropdown. Read state is kept only in the page; save it with fetch() in the click handlers. The avatar photos come from Unsplash; replace them with your own images.

Notification List with Read and Unread States at a glance

Framework
Bootstrap 5
Code
HTML, CSS, JavaScript
JavaScript
Vanilla JavaScript, no jQuery
Dependencies
Bootstrap 5, Bootstrap Icons
Layout
Responsive, works on mobile
Category
Lists
License
Free for personal and commercial use

Questions about this template

Can I use the Notification List with Read and Unread States code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Bootstrap 5 and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

Add these to your page (already included in the download):

  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  • <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
Notification List with Read and Unread States – Bootstrap 5 lists component screenshot
Notification List with Read and Unread States · Bootstrap 5 Lists

More Lists

Animated To-Do Checklist – Pure CSS lists preview

Animated To-Do Checklist

Dark to-do checklist in pure CSS with self-drawing check marks, an animated strike-through, a progress bar and vanilla JS to add and clear tasks.

Pure CSS Lists
Actionable List Group – Bootstrap 5 lists preview

Actionable List Group

Bootstrap 5 list group panel with unread badges, notification toggle switches and invite rows with accept and decline buttons.

Bootstrap 5 Lists
List with Avatars and Actions – Tailwind CSS lists preview

List with Avatars and Actions

Dark Tailwind CSS user list with initials avatars, online status, meta details and accessible Follow toggle buttons with a live counter.

Tailwind CSS Lists