Logo

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,

Bootstrap Notification Bubble

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:

Bootstrap Notification Bubble

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

Bootstrap Notification Bubble

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

Bootstrap Notification Bubble

Related Topics

Bootstrap 4 Flex

Bootstrap 4 Flex Flex is a Bootstrap 4 component used to manage the layout, navigation bar, grid columns, sizing, alignment, and other components. The flexbox or flex utility is the replacement...

26 minutes read.

Bootstrap Datepicker

What is a Bootstrap Datepicker? It is used to display a calendar with the date, month, and time from a dropdown menu. We will use an example to see how the date...

5 minutes read.

Bootstrap With CSS

← Prev Next → ...

1 minute read.

Bootstrap Tabs and Pills

Bootstrap Menus Bootstrap menu is used to create different types of menu. It can created horizontal with its .list-inlineclass. <div class="container">       <h3>Example of Bootstrap Menu</h3>       <ul class="list-inline">         <li><a href="#">Home</a></li>         <li><a href="#">About</a></li>         <li><a href="#">Contact</a></li>         <li><a href="#">services</a></li>       </ul>     </div> Try Now Bootstrap Tabs Bootstrap tabl is look like is menu but there is some difference....

4 minutes read.

Bootstrap Multiselect Dropdown

What is a multi-select Dropdown? Multi-select dropdown lists are used when we want to select multiple options for a particular record. Usually, dropdown lists provide the feature of choosing just one value...

4 minutes read.

Bootstrap 4 Dropdowns

Bootstrap Dropdowns Bootstrap 4 provides a dropdown component, which is a toggle and contextual layout, used to display a predefined list of links. It allows the user to select a value from the dropdown...

15 minutes read.

Bootstrap Images

Bootstrap 4 Images Bootstrap provides several classes for images to make them responsive and also helps to give some style to the images. Image Shapes Rounded Corners Bootstrap 4 offers .rounded class that makes the corners...

5 minutes read.

Bootstrap Time Picker Example

What is a Bootstrap Time picker? It is used to display the time in hours, minutes and seconds from a dropdown menu. In this section, we will create an example to...

4 minutes read.

Bootstrap Protocol (BOOTP)

In the following article, we will learn about the Bootstrap Protocol and how it maintains contracts among linked devices on webwork. What is Bootstrap Protocol? The Bootstrap Protocol is a webwork contract...

3 minutes read.

Bootstrap 4 Form

Bootstrap 4 Forms Bootstrap 4 provides forms, which are one of the essential components for web pages and web applications. It is an input-based component, used to collect user data with the help of...

8 minutes read.

Bootstrap Navigation bar

Navigation Bars In Bootstrap, We can create navigation bar like a navigation header. It is placed at the top of the page. We can collapse or extend it according to screen...

3 minutes read.

Bootstrap 4 Tutorial

What is Bootstrap? Bootstrap is a CSS (Cascading Style Sheets) framework, which is used to develop a responsive website. It is an open-source and mobile-first front-end framework. It has design templates that are based...

4 minutes read.

Bootstrap 4 Icons

Bootstrap 4 Icons Bootstrap 3 contains the default icon library. But in bootstrap 4, you have to include the external icon library by yourself. Many free icon libraries are available such...

2 minutes read.

Bootstrap 4 Buttons

Bootstrap Buttons Bootstrap provides many custom button styles. These buttons are used in forms and dialog boxes for actions. Bootstrap offers various predefined classes for providing styles to buttons. There are many classes that are used...

7 minutes read.

Bootstrap 4 Progress Bar

Bootstrap Progress Bar Bootstrap 4 offers progress bars that are used to represent the progress of tasks such as downloading a file, software installation, etc. on the computer. It represents the percentage of the...

9 minutes read.

Bootstrap Input groups

Bootstrap 4 Input groups The input group is a component of Bootstrap 4, which is used to create interactive and stylish form controls. With the help of input groups, you can easily customize the input...

8 minutes read.

Bootstrap 4 Jumbotron

Bootstrap 4 Jumbotron Bootstrap offers Jumbotron, which is used to get more attention to specific content or information on the web page. It provides a gray background-color to the content to make that content...

2 minutes read.

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...

5 minutes read.

Environment Setup

How to use Bootstrap? We can use bootstrap in our project either by downloading or by providing link of the library files. 1) Download Bootstrap files To download files, visit official site of bootstrap www.getbootstrap.com/download/ and...

1 minute read.

Bootstrap Tables

We can create different types of responsive and awesome bootstrap table like: striped , border etc. Bootstrap Basic Table We can create a basic bootstrap table by using its class .table. It has...

3 minutes read.