twitter-bootstrap-3 - navbarのバルーンに新しいメッセージの数を表示するには?

Question

私のウェブサイトのナビゲーションバーは以下です。Messagingオプションの横にバルーンのようなものを追加して、新しいメッセージの数を示すようにしたいと考えています。Facebook や Stack Overflow で見られるようなものです。

データベースから新しいメッセージの数を取得できますが、問題は上記のように表示する方法です。

ブートストラップを使用しています。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div style="min-width:1280px;" class="navbar-inner">
        <ul class="nav pull-right">
            <li class="divider-vertical"></li>
            <li><a href="MasFeedback.aspx">feedback</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasProjects.aspx">Projects</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasWeekSchedule.aspx">Schedule</a></li>
            <li class="divider-vertical input-append"></li>
            <li><a href="MasMessaging.aspx">MESSAGING</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasProfile.aspx">Profile</a></li>
            <li class="divider-vertical"></li>
            <li><a href="MasHome.aspx">Home</a></li>
            <li class="divider-vertical"></li>
        </ul>
        <asp:LinkButton CssClass="brand" ID="LinkButton5" runat="server" Font-Size="Large" Font-Underline="False" Style="color: #FF0000; font-weight: 700; padding-left:120px;" OnClick="LinkButton4_Click" ForeColor="Red" Text="خروج از سامانه"></asp:LinkButton>
    </div>
</div>