Add a alert to your UI with Bootstrap 5 Notification Page Design snippets example. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<header>
2 <nav class="navbar navbar-expand-lg navbar-light bg-light">
3 <div class="container">
4 <a class="navbar-brand" href="#">Navbar</a>
5 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
6 <span class="navbar-toggler-icon"></span>
7 </button>
8 <div class="collapse navbar-collapse" id="navbarSupportedContent">
9 <ul class="navbar-nav ms-auto">
10 <li class="nav-item">
11 <a class="nav-link" href="#">Home</a>
12 </li>
13 <li class="nav-item">
14 <a class="nav-link" href="#">About</a>
15 </li>
16 <li class="nav-item">
17 <a class="nav-link" href="#">Contact</a>
18 </li>
19 <li class="nav-item">
20 <a class="nav-link" href="#">Login</a>
21 </li>
22 <li class="nav-item">
23 <a class="nav-link" href="#">Signup</a>
24 </li>
25 </ul>
26 </div>
27 </div>
28 </nav>
29 </header>
30
31 <section class="section-50">
32 <div class="container">
33 <h3 class="m-b-50 heading-line">Notifications <i class="fa fa-bell text-muted"></i></h3>
34
35 <div class="notification-ui_dd-content">
36 <div class="notification-list notification-list--unread">
37 <div class="notification-list_content">
38 <div class="notification-list_img">
39 <img src="https://i.imgur.com/zYxDCQT.jpg" alt="user">
40 </div>
41 <div class="notification-list_detail">
42 <p><b>John Doe</b> reacted to your post</p>
43 <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, dolorem.</p>
44 <p class="text-muted"><small>10 mins ago</small></p>
45 </div>
46 </div>
47 <div class="notification-list_feature-img">
48 <img src="https://i.imgur.com/AbZqFnR.jpg" alt="Feature image">
49 </div>
50 </div>
51 <div class="notification-list notification-list--unread">
52 <div class="notification-list_content">
53 <div class="notification-list_img">
54 <img src="https://i.imgur.com/w4Mp4ny.jpg" alt="user">
55 </div>
56 <div class="notification-list_detail">
57 <p><b>Richard Miles</b> liked your post</p>
58 <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, dolorem.</p>
59 <p class="text-muted"><small>10 mins ago</small></p>
60 </div>
61 </div>
62 <div class="notification-list_feature-img">
63 <img src="https://i.imgur.com/AbZqFnR.jpg" alt="Feature image">
64 </div>
65 </div>
66 <div class="notification-list">
67 <div class="notification-list_content">
68 <div class="notification-list_img">
69 <img src="https://i.imgur.com/ltXdE4K.jpg" alt="user">
70 </div>
71 <div class="notification-list_detail">
72 <p><b>Brian Cumin</b> reacted to your post</p>
73 <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, dolorem.</p>
74 <p class="text-muted"><small>10 mins ago</small></p>
75 </div>
76 </div>
77 <div class="notification-list_feature-img">
78 <img src="https://i.imgur.com/bpBpAlH.jpg" alt="Feature image">
79 </div>
80 </div>
81 <div class="notification-list">
82 <div class="notification-list_content">
83 <div class="notification-list_img">
84 <img src="https://i.imgur.com/CtAQDCP.jpg" alt="user">
85 </div>
86 <div class="notification-list_detail">
87 <p><b>Lance Bogrol</b> reacted to your post</p>
88 <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, dolorem.</p>
89 <p class="text-muted"><small>10 mins ago</small></p>
90 </div>
91 </div>
92 <div class="notification-list_feature-img">
93 <img src="https://i.imgur.com/iIhftMJ.jpg" alt="Feature image">
94 </div>
95 </div>
96 <div class="notification-list">
97 <div class="notification-list_content">
98 <div class="notification-list_img">
99 <img src="https://i.imgur.com/zYxDCQT.jpg" alt="user">
100 </div>
101 <div class="notification-list_detail">
102 <p><b>Parsley Montana</b> reacted to your post</p>
103 <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde, dolorem.</p>
104 <p class="text-muted"><small>10 mins ago</small></p>
105 </div>
106 </div>
107 <div class="notification-list_feature-img">
108 <img src="https://i.imgur.com/bpBpAlH.jpg" alt="Feature image">
109 </div>
110 </div>
111 </div>
112
113 <div class="text-center">
114 <a href="#!" class="dark-link">Load more activity</a>
115 </div>
116
117 </div>
118 </section>
Bootstrap 5 Notification UI Design snippets with navbar
Bootstrap 5 Notification UI Design snippets with navbar — a free Bootstrap 5 alert snippet.
Custom Toast notification with Progress Bar
Add a alert to your UI with Custom Toast notification with Progress Bar. Free Bootstrap 5 code — HTML, CSS & JS ready to copy, MIT licensed.
Bootstrap 5 messages alerts snippets
Free Bootstrap 5 alert snippet — Bootstrap 5 messages alerts snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.