Bootstrap 5 Notification Page Design snippets example

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>