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.
Interactive Navbar with Sliding Active Indicator with CSS and JS
Responsive Tailwind CSS SaaS Hero with Theme Switcher
Bootstrap 5 Hero Section with Lottie Animation Integration
Creative CSS Intro Text Reveal Animation with No JS
Tailwind CSS Hero Section with Dual CTA Buttons and Prominent Image
Bootstrap 4 Pricing Cards with Monthly and Yearly Options
Responsive CSS Only Smooth Sliding Tab Transitions
Tailwind CSS Subscription Section for Services & Plans
Responsive Bootstrap 5 Contact Form with Image Preview and Map
Modern CSS Only Loading Spinners Collection
Modern Tailwind CSS Hero Section with Promo and Dual Buttons
Clean Bootstrap 5 Contact Form and Contact Details Layout
Building Blocks for Your Web Pages
Explore a collection of pre-written HTML,CSS and Javascript
snippets to jumpstart your web development projects.
