Bootstrap navbar notification badge

Question

I am building a website which allows users to send messages to each other. I get number of new messages using AJAX. Therefore, I just need to find a way how to display a badge in users's navbar.

Here is what I want to achieve:

I want the badge to be created using <span class="badge badge-pill badge-primary">1</span>.

My code for navbar:

<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-laravel" style="margin-bottom: 20px;">
    <div class="container">
        <a class="navbar-brand" href="#">Website</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">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">People <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Photos <span class="sr-only">(current)</span></a>
                </li>
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <li><a class="nav-link" href="#">Login</a></li>
                <li><a class="nav-link" href="#">Register</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

according to the image you posted, you can add the badge in the messages parent <li> like :

<li class="nav-item">
    <span class="badge badge-pill badge-primary" style="float:right;margin-bottom:-10px;">1</span> <!-- your badge -->
    <a class="nav-link" href="messages">Messages <span class="sr-only">(current)</span></a>
</li>

( assuming no javascript needed since you said you already have the ajax function ready to update the badge value ).

ofcourse, you can extract the inline styling to an external stylesheet

(here's a fiddle https://jsfiddle.net/k6x40tct/2/ )

hope this helps.