Notification badge

Bootstrap 5 Notification badge component

Responsive Notification badge built with Bootstrap 5. Examples of basic badges, maximum value badges, dot badges and badge visibility.

Basic badges

You can use our icons and .badge-notification class to create a facebook-like notification.

Use utilities to modify a .badge and position it in the corner of a link or button.

Use social buttons and .badge-notification class, put it to div to create an app-like notification.

9
10
Edit in sandbox 
        
             
      <!-- Icon -->
      <a href="" class="text-body">
        <i class="fas fa-envelope fa-2x"></i>
        <span class="badge rounded-pill badge-notification bg-danger">9</span>
    </a>

    <!-- Button -->
    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary position-relative">
        Inbox
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill badge-danger">
            99+
            <span class="visually-hidden">unread messages</span>
        </span>
    </button>
    
    <!-- Floating social button -->
    <div>
        <a data-mdb-ripple-init class="btn text-white btn-lg btn-floating" style="background-color: #25d366;" href="#!" role="button">
            <i class="fab fa-whatsapp fa-2x"></i>
        </a>
        <span class="badge rounded-pill badge-notification bg-danger">10</span>
      </div>

Maximum value

Set the maximum number of notifications.

9 99 999+
Edit in sandbox 
        
             
      <a href="" class="text-body">
        <i class="fas fa-envelope fa-2x"></i>
        <span class="badge rounded-pill badge-notification bg-danger">9</span>
    </a>
    
    <a href="" class="text-body">
        <i class="fas fa-envelope fa-2x"></i>
        <span class="badge rounded-pill badge-notification bg-danger">99</span>
    </a>

    <a href="" class="text-body">
        <i class="fas fa-envelope fa-2x"></i>
        <span class="badge rounded-pill badge-notification bg-danger">999+</span>
    </a>

Dot badge

Edit in sandbox 
        
             
      
        <a href="" class="text-body mx-3">
            <i class="fas fa-envelope fa-2x"></i>
            <span class="badge bg-danger badge-dot"></span>
        </a>

Badge visibility

You can turn badges on and off by adding a toggle switch and JS.

9
Edit in sandbox 
        
             
      <!-- Default switch -->
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault" />
      <label class="form-check-label" for="flexSwitchCheckDefault">Show badge</label>
  </div>

      <a href="" class="text-body mx-5">
        <i class="fas fa-envelope fa-2x"></i>
        <span class="badge rounded-pill badge-notification bg-danger toggle-badge d-none">9</span>
    </a>
      
        
    
        
             
      document.getElementById('flexSwitchCheckDefault').addEventListener('click' ,() => {
        document.querySelector('.toggle-badge').classList.toggle('d-none');
      });