How to create a navbar with a notification counter using bootstrap 4 ?

Examples of how to create a navbar with a notification counter using bootstrap 4:

Table of contents

Example 1
Example 2
References

Example 1

code

<span class="badge badge-pill badge-warning" style="float:right;margin-bottom:-15px;margin-right:-18px;font-size:10px">123</span>
<a class="nav-link" href="/News/">News <span class="sr-only">(current)</span></a>

How to create a navbar with a notification counter using bootstrap 4 ?

Full code:

<!DOCTYPE html>
<html lang="en">

<head>

<title>Test</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>

<nav class="navbar navbar-expand-lg navbar-default fixed-top navbar-dark" style="background-color: #3c3d41;" id="mainNav">

  <div class="container">

      <a class="navbar-brand" href="/" style="color:white">Hello World</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">    
            <li class="nav-item">
                <span class="badge badge-pill badge-warning" style="float:right;margin-bottom:-15px;margin-right:-18px;font-size:10px">123</span>
                <a class="nav-link" href="/News/">News <span class="sr-only">(current)</span></a>
            </li>         
        </ul>
      </div>

</div>
</nav>


</body>
</html>

Example 2

Changing the color:

badge-danger

badge-info

References

Hi, I'm Ben, the Founder of moonbooks.org. I work as a research scientist specializing in Earth satellite remote sensing, particularly focusing on Fire detection using VIIRS and ABI sensors. My areas of expertise include Python, Machine Learning, and Open Science. Feel free to reach out if you notice any errors on the site. I am constantly striving to enhance it. Thank you!

How to create a navbar with a notification counter using bootstrap 4 ?

Example 1

Example 2

References

Benjamin

Skills