Notification UI Design Free Download

Notification UI Design

Notification UI Design is very useful for any website or mobile app. Notification UI is an act of bringing something to the notice of the user. Notification UI is a way for an app or website to notify users or send a message that users can read without having to open the app. Most of the companies are using the Notification UI for Business promotion or New Product or new service launch.

Demo

Notification UI Design

How to create a Notification UI Design?

In this tutorial, we will learn how to create a Notification UI Design using Bootstrap library, Javascript, HTML, and CSS.

So, let’s start, First we need the add the below Bootstrap library and Javascript library in the Header section of the web page.

CSS Library

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

Javascript Library

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

HTML Code

<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 dropdown notification-ui"> <a class="nav-link dropdown-toggle notification-ui_icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i> <span class="unread-notification"></span> </a>
            <div class="dropdown-menu notification-ui_dd" aria-labelledby="navbarDropdown">
              <div class="notification-ui_dd-header">
                <h3 class="text-center">Notification</h3>
              </div>
              <div class="notification-ui_dd-content">
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user1.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Rahul Singh</b> reacted to your post</p>
                    <p><small>10 mins ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random1.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user2.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Karan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random2.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user3.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Aryan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random3.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user4.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Neha</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random4.jpg" alt="Feature image"> </div>
                </div>
              </div>
              <div class="notification-ui_dd-footer text-center py-3"> <a href="#!" class="btn btn-success btn-block">View All</a> </div>
            </div>
          </li>
          <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>

CSS Code

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap);body {
  font-family: "Roboto", sans-serif;
  background: #E6E9ED;
  min-height: 100vh;
  position: relative;
}

.notification-ui a:after {
  display: none;
}

.notification-ui_icon {
  position: relative;
}
.navbar-collapse {
    flex-basis: 100%;
    flex-grow: unset !important;
    align-items: center;
}
.notification-ui_icon .unread-notification {
  display: inline-block;
  height: 7px;
  width: 7px;
  border-radius: 7px;
  background-color: #66BB6A;
  position: absolute;
  top: 7px;
  left: 12px;
}

@media (min-width: 900px) {
  .notification-ui_icon .unread-notification {
    left: 20px;
  }
}

.notification-ui_dd {
  padding: 0;
  border-radius: 10px;
  -webkit-box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
          box-shadow: 0 5px 20px -3px rgba(0, 0, 0, 0.16);
  border: 0;
  max-width: 400px;
}

@media (min-width: 900px) {
  .notification-ui_dd {
    min-width: 400px;
    position: absolute;
    left: -192px;
    top: 70px;
  }
}

.notification-ui_dd:after {
  content: "";
  position: absolute;
  top: -30px;
  left: calc(50% - 7px);
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}

.notification-ui_dd .notification-ui_dd-header {
  border-bottom: 1px solid #ddd;
  padding: 15px;
}

.notification-ui_dd .notification-ui_dd-header h3 {
  margin-bottom: 0;
}

.notification-ui_dd .notification-ui_dd-content {
  max-height: 500px;
  overflow: auto;
}

.notification-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 0;
  margin: 0 25px;
  border-bottom: 1px solid #ddd;
}

.notification-list--unread {
  position: relative;
}

.notification-list--unread:before {
  content: "";
  position: absolute;
  top: 0;
  left: -25px;
  height: calc(100% + 1px);
  border-left: 2px solid #52af06;
}

.notification-list .notification-list_img img {
  height: 48px;
  width: 48px;
  border-radius: 50px;
  margin-right: 20px;
}

.notification-list .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;
}

SCSS Code

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');

$green:#66BB6A;
$blue:#29B6F6;
$background-color:#E6E9ED;

// Mixin
@mixin phone {
  @media (max-width: 599px) { @content; }
}
@mixin tablet {
  @media (min-width: 600px) { @content; }
}
@mixin laptop {
  @media (min-width: 900px) { @content; }
}
@mixin desktop {
  @media (min-width: 1200px) { @content; }
}

body{
	font-family: "Roboto", sans-serif;
	background:$background-color;
	min-height:100vh;
	position: relative;
}

.notification-ui{
	a{
		&:after{
			display: none;
		}
	}
}
.notification-ui_icon{
	position: relative;
	.unread-notification{
		display:inline-block;
		height:7px;
		width:7px;
		border-radius:7px;
		background-color:$green;
		position:absolute;
		top:7px;
		left:12px;
		@include laptop{
			left:20px;
		}
	}
}

.notification-ui_dd{
	padding:0;
	border-radius: 10px;
	box-shadow: 0 5px 20px -3px rgba(0,0,0,0.16);
	border: 0;
	max-width: 400px;
	@include laptop{
		min-width: 400px;
		position: absolute;
	    left: -192px;
	    top: 70px;
	}
    &:after{
    	content:"";
    	position: absolute;
    	top:-30px;
    	left:calc(50% - 7px);
    	border-top:15px solid transparent;
    	border-right:15px solid transparent;
    	border-bottom:15px solid #fff;
    	border-left:15px solid transparent;
    }
	.notification-ui_dd-header{
		border-bottom:1px solid #ddd;
		padding:15px;
		h3{
			margin-bottom: 0;
		}
	}
	.notification-ui_dd-content{
		max-height:500px;
		overflow: auto;
	}
	.notification-ui_dd-footer{}
}

.notification-list{
	display: flex;
	justify-content: space-between;
	padding:20px 0;
	margin:0 25px;
	border-bottom: 1px solid #ddd;
	&--unread{
		position: relative;
		&:before{
			content:"";
			position: absolute;
			top:0;
			left:-25px;
			height:calc(100% + 1px);
			border-left: 2px solid $blue;
		}
	}
	.notification-list_img{
		img{
			height:48px;
			width:48px;
			border-radius:50px;
			margin-right:20px;
		}
	}
	.notification-list_detail{
		p{
			margin-bottom: 5px;
			line-height:1.2;
		}
	}
	.notification-list_feature-img{
		img{
			height:48px;
			width:48px;
			border-radius:5px;
			margin-left:20px;
		}
	}
}

Full Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notification UI Design</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</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 dropdown notification-ui"> <a class="nav-link dropdown-toggle notification-ui_icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bell"></i> <span class="unread-notification"></span> </a>
            <div class="dropdown-menu notification-ui_dd" aria-labelledby="navbarDropdown">
              <div class="notification-ui_dd-header">
                <h3 class="text-center">Notification</h3>
              </div>
              <div class="notification-ui_dd-content">
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user1.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Rahul Singh</b> reacted to your post</p>
                    <p><small>10 mins ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random1.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list notification-list--unread">
                  <div class="notification-list_img"> <img src="images/users/user2.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Karan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random2.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user3.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Aryan</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random3.jpg" alt="Feature image"> </div>
                </div>
                <div class="notification-list">
                  <div class="notification-list_img"> <img src="images/users/user4.jpg" alt="user"> </div>
                  <div class="notification-list_detail">
                    <p><b>Neha</b> reacted to your post</p>
                    <p><small>1 day ago</small></p>
                  </div>
                  <div class="notification-list_feature-img"> <img src="images/features/random4.jpg" alt="Feature image"> </div>
                </div>
              </div>
              <div class="notification-ui_dd-footer text-center py-3"> <a href="#!" class="btn btn-success btn-block">View All</a> </div>
            </div>
          </li>
          <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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Download Full Source code of Notification UI Design

Icon

Download Source code for Notification UI Design

1 file(s) 110KB
Download

Read Also:

  1. Pricing Table Design Bootstrap 5?
  2. How to Display Content on hovering Card using CSS?
  3. How to create a Portfolio Gallery?
  4. FAQ Page with Show and Hide Questions and Answers?
  5. Bootstrap Team Section Design Download
  6. Bootstrap Carousel with Captions and Thumbnails Free Download
  7. Bootstrap Table Search Filter Free Download

Related Post

Owl Carousel Product Slider in HTML5
December 13, 2022
HTMLCSS

Owl Carousel Product Slider in HTML5

Know Details
Review Page Design in HTML5 Download
December 7, 2022
HTMLCSS

Review Page Design in HTML5 Download

Know Details
Product Grid in HTML5
December 4, 2022
HTMLCSS

Product Grid in HTML5

Know Details
jQuery Carousel Slider With Accordion Style Transitions
June 6, 2022
HTMLCSS

jQuery Carousel Slider With Accordion Style Transitions

Know Details
Testimonials HTML Template Free Download
January 15, 2022
HTMLCSS

Testimonials HTML Template Free Download

Know Details
Bootstrap Table with Pagination and Search
January 9, 2022
HTMLCSS

Bootstrap Table with Pagination and Search

Know Details

Leave a Reply

Your email address will not be published. Required fields are marked *