Bootstrap Notification Bubble

What is a notification bubble?

Bubbles are built into the Notification system. They float on top of the website or the button to indicate pending notifications. Bubbles can be expanded to reveal the information inside the notification or can be collapsed/dismissed when not being used.

The section consists of two types of examples to demonstrate the notification bubbles.

Following is an example that shows the number of notifications. A number(in a smaller font) floats on the edge of the button to show the total pending notifications.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  
    <title>Bootstrap Notification Bubble</title>
    <style>
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #57606f;
    background-color: #f1f2f6;
}
.container {
  margin: 100px auto;
  text-align: center;
}
.notification-container {
  position: relative;
	display: inline-block;
  margin-top: 10px;
}
.notification-bubble {
    position: absolute;
    top: -8px;
    right: -7px;
    padding: 2px 5px 2px 6px;
    background-color: #3742fa;
    color: white;
    font-size: 0.60em;
    border-radius: 50%;
    box-shadow: 1px 1px 1px gray;
    display: none;
  }
.btn {
  background: #574b90;
  color: #f1f2f6;
  border: none;
  border-radius: 12px;
  opacity: 0.6;
}
.btn:hover {
  background-color: #8c7ae6;
  border: none;
}
.btn:focus {
  background-color: #8c7ae6;
  outline: none;
  box-shadow: none;


}
    </style>
</head>
<body>
    <div class="container">
        <h3>Following is an example to demonstrate the Bootstrap notification bubble.</h3><br>
        <p>Click on the button to generate the bubble</p><br>
        <div class="notification-container">
          <span class="notification-bubble">4</span>
          <button type="button" class="btn btn-notification">Check Notifications</button>
        </div>
      </div>  
</body>
<script>
    $(function() {
  $('.btn-notification').click(function() {
  	$('.notification-bubble').show(200);
	});
});
</script>
</html>

Output:

Initially, the website looks like this,

Following is an example that shows the list of notifications. It displays all the pending notifications, and the user can either view them or dismiss/collapse them.

Example 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  
    <title>Bootstrap Notification Bubble</title>
    <style>
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #57606f;
    background-color: #c8d6e5;
}
.row{
  margin:auto;
  padding: 30px;
  width: 80%;
  display: flex;
  flex-flow: column;
}
.card{
    width: 100%;
    margin-bottom: 5px;
    display: block;
    transition: opacity 0.3s;
  }
  a.btn{
          font-size: 0.8rem;
          padding: 3px;
        }
.card-body{
  padding: 0.5rem;
  border-radius: 50%;
}
tr{
      display:flex;
      
    }
table{
    width: 100%;
  }
.card-title:before{
  display:inline-block;
  font-family: 'Font Awesome\ 5 Free';
  font-weight:900;
  font-size: 1.1rem;
  text-align: center;
  border: 2px solid grey;
  border-radius: 100px;
  width: 30px;
  height: 30px;
  padding-bottom: 3px;
  margin-right: 10px;
}
.card-title:before {
      color: #90CAF9;
      border-color: #90CAF9;
      content: "\f007";
    }
.card-title:before {
      color: #FFE082;
      border-color: #FFE082;
      content: "\f071";
    }
.card-title:before {
      color: #FFAB91;
      border-color: #FFAB91;
      content: "\f00d";
    }
.card-title:before {
      color: #CE93D8;
      border-color: #CE93D8;
      content: "\f017";
    }
.card.display-none{
  display: none;
  transition: opacity 2s;
}
.btn{
    border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 10px;
}
.btn-reply{
    background-color: #2e86de;
}
.btn-danger{
    background-color: #1e3799;
}
.btn-reply:hover{
    background-color: #34B7F1;
}
.btn-danger:hover{
    background-color: #0c2461;
}
.btn-danger:focus{
    background-color: #0c2461;
}
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
        <h3 class="text-center">Here are all the Notifications popped up!</h3>
        <p class="dismiss text-right"><a id="dismiss-all" href="#">Dimiss All</a></p>
        <div class="card notification-card notification-invitation">
          <div class="card-body">
            <table>
              <tr>
                <td style="width:70%"><div class="card-title"><b>Mom: </b>Get some eggs on your way back.</div></td>
                <td style="width:30%">
                  <a href="#" class="btn btn-reply">Reply</a>
                  <a href="#" class="btn btn-danger dismiss-notification">Dismiss</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="card notification-card notification-warning">
          <div class="card-body">
             <table>
              <tr>
                <td style="width:70%"><div class="card-title"><b>Sam: </b>Coming to the party?</div></td>
                <td style="width:30%">
                  <a href="#" class="btn btn-reply">Reply</a>
                  <a href="#" class="btn btn-danger dismiss-notification">Dismiss</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="card notification-card notification-danger">
          <div class="card-body">
             <table>
              <tr>
                <td style="width:70%"><div class="card-title"><b>Martha: </b>We have a meeting scheduled on Tuesday. Cool?</div></td>
                <td style="width:30%">
                  <a href="#" class="btn btn-reply">Reply</a>
                  <a href="#" class="btn btn-danger dismiss-notification">Dismiss</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <div class="card notification-card notification-reminder">
          <div class="card-body">
             <table>
              <tr>
                <td style="width:70%"><div class="card-title"><b>Peter: </b>Hey bro, call me when you are free.</div></td>
                <td style="width:30%">
                  <a href="#" class="btn btn-reply">Reply</a>
                  <a href="#" class="btn btn-danger dismiss-notification">Dismiss</a>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      </div>  
</body>
<script>
const dismissAll = document.getElementById('dismiss-all');
const dismissBtns = Array.from(document.querySelectorAll('.dismiss-notification'));
const notificationCards = document.querySelectorAll('.notification-card');
dismissBtns.forEach(btn => {
  btn.addEventListener('click', function(e){
    e.preventDefault;
    var parent = e.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
    parent.classList.add('display-none');
  })
});
dismissAll.addEventListener('click', function(e){
  e.preventDefault;
  notificationCards.forEach(card => {
    card.classList.add('display-none');
  });
  const row = document.querySelector('.notification-container');
  const message = document.createElement('h4');
  message.classList.add('text-center');
  message.innerHTML = 'Great! You are all caught up!';
  row.appendChild(message);
})
</script>
</html>

Output:

We can click on the “Dismiss” buttons to collapse the notification, as shown below

We can click on the “Dismiss All” button to dismiss all the notifications, as shown below