Notification Page Design Examples in Bootstrap 5
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Signup</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<section class="section-50">
<div class="container">
<h3 class="m-b-50 heading-line">Notifications <i class="fa fa-bell text-muted"></i></h3>
<div class="notification-ui_dd-content">
<div class="notification-list notification-list--unread">
<div class="notification-list_content">
<div class="notification-list_img">
<img src="https://i.imgur.com/zYxDCQT.jpg" alt="user">
</div>
<div class="notification-list_detail">
<p><b>John Doe</b> reacted to your post</p>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde,
dolorem.</p>
<p class="text-muted"><small>10 mins ago</small></p>
</div>
</div>
<div class="notification-list_feature-img">
<img src="https://i.imgur.com/AbZqFnR.jpg" alt="Feature image">
</div>
</div>
<div class="notification-list notification-list--unread">
<div class="notification-list_content">
<div class="notification-list_img">
<img src="https://i.imgur.com/w4Mp4ny.jpg" alt="user">
</div>
<div class="notification-list_detail">
<p><b>Richard Miles</b> liked your post</p>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde,
dolorem.</p>
<p class="text-muted"><small>10 mins ago</small></p>
</div>
</div>
<div class="notification-list_feature-img">
<img src="https://i.imgur.com/AbZqFnR.jpg" alt="Feature image">
</div>
</div>
<div class="notification-list">
<div class="notification-list_content">
<div class="notification-list_img">
<img src="https://i.imgur.com/ltXdE4K.jpg" alt="user">
</div>
<div class="notification-list_detail">
<p><b>Brian Cumin</b> reacted to your post</p>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde,
dolorem.</p>
<p class="text-muted"><small>10 mins ago</small></p>
</div>
</div>
<div class="notification-list_feature-img">
<img src="https://i.imgur.com/bpBpAlH.jpg" alt="Feature image">
</div>
</div>
<div class="notification-list">
<div class="notification-list_content">
<div class="notification-list_img">
<img src="https://i.imgur.com/CtAQDCP.jpg" alt="user">
</div>
<div class="notification-list_detail">
<p><b>Lance Bogrol</b> reacted to your post</p>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde,
dolorem.</p>
<p class="text-muted"><small>10 mins ago</small></p>
</div>
</div>
<div class="notification-list_feature-img">
<img src="https://i.imgur.com/iIhftMJ.jpg" alt="Feature image">
</div>
</div>
<div class="notification-list">
<div class="notification-list_content">
<div class="notification-list_img">
<img src="https://i.imgur.com/zYxDCQT.jpg" alt="user">
</div>
<div class="notification-list_detail">
<p><b>Parsley Montana</b> reacted to your post</p>
<p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde,
dolorem.</p>
<p class="text-muted"><small>10 mins ago</small></p>
</div>
</div>
<div class="notification-list_feature-img">
<img src="https://i.imgur.com/bpBpAlH.jpg" alt="Feature image">
</div>
</div>
</div>
<div class="text-center">
<a href="#!" class="dark-link">Load more activity</a>
</div>
</div>
</section>
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
<script type='text/javascript' src='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js'>
</script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap);
body {
font-family: "Roboto", sans-serif;
background: #EFF1F3;
min-height: 100vh;
position: relative;
}
.section-50 {
padding: 50px 0;
}
.m-b-50 {
margin-bottom: 50px;
}
.dark-link {
color: #333;
}
.heading-line {
position: relative;
padding-bottom: 5px;
}
.heading-line:after {
content: "";
height: 4px;
width: 75px;
background-color: #29B6F6;
position: absolute;
bottom: 0;
left: 0;
}
.notification-ui_dd-content {
margin-bottom: 30px;
}
.notification-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 20px;
margin-bottom: 7px;
background: #fff;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.notification-list--unread {
border-left: 2px solid #29B6F6;
}
.notification-list .notification-list_content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.notification-list .notification-list_content .notification-list_img img {
height: 48px;
width: 48px;
border-radius: 50px;
margin-right: 20px;
}
.notification-list .notification-list_content .notification-list_detail p {
margin-bottom: 5px;
line-height: 1.2;
}
.notification-list .notification-list_feature-img img {
height: 48px;
width: 48px;
border-radius: 5px;
margin-left: 20px;
}
//Doesn't require any JS.
This Bootstrap 5 snippet provides a visually appealing and functional notification page designed to display recent activities or updates to users. The page features a clean and organized layout, allowing users to easily view and manage their notifications.
Key Features:
- Notification Feed: Displays a list of recent notifications, including user actions, comments, or other relevant events.
- Customizable Styling: Easily modify the appearance of the notification page using Bootstrap's CSS classes to match your website's design and branding.
- Clear and Concise Presentation: The notifications are presented in a clear and concise manner, making it easy for users to understand and take action.
- Pagination: Handle large numbers of notifications by implementing pagination to display them in manageable pages.
- Mark as Read/Unread Functionality: Allow users to mark notifications as read or unread, helping them manage and prioritize their notifications.
Implementation:
- Include Bootstrap 5: Ensure you have Bootstrap 5 installed and configured in your project.
- Create the HTML Structure: Set up the basic HTML structure for the notification page, including the container, notification list, and pagination elements.
- Apply Bootstrap Classes: Use Bootstrap's CSS classes to style the notification page and its elements, such as container, list-group, list-group-item, badge, pagination, and any other relevant classes.
- Customize as Needed: Modify the Bootstrap classes and HTML structure to customize the appearance and content of the notification page according to your specific requirements.
Stylish Contact Form with Image in Tailwind CSS
Responsive Registration Form with Image in Tailwind CSS
Bootstrap 5 Payment Method Form Page with Invoice
Modern Pricing Table Design with Bootstrap 4
Responsive Multi-Level Drop-Down Navigation Menu in CSS
Interactive Bottom Navigation Bar Indicator with CSS
Real-time Password Strength Indicator in Bootstrap 5
Responsive Video Card Component for Tailwind CSS
Responsive Feature Highlight Component with Tailwind CSS
Multi-Step Form with International Phone Input and Nice Select
Responsive Review Cards Component with CSS3
Responsive CSS3 Timeline Design With Hover Effects
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
