How to make a total count of messages / alerts indicator in Bootstrap?

Question

I am not familiar with the exact term and keyword to search and Iam just begining to design. So I would like to ask if the term alert indicator is correct.

And how do I be able to do it on Twitter Bootstrap?

below is the image of the indicator i would like to accomplish. Thanks..

Answer 1

Take a look at Bootstrap's Badges: http://getbootstrap.com/components/#badges

Make a class that specifies a container for a glyphicon and badge and places the badge at a fixed offset from the icon. Something like this:

<div class="notification-icon">
    <span class="glyphicon glyphicon-envelope"></span>
    <span class="badge">19</span>
</div>

With CSS like this:

.notification-icon .glyphicon {
    ...
}

.notification-icon .badge {
    ...
}

You should easily be able to set it up so that the badge only shows when you have a nonzero number of notifications.