Bootstrap Badge

0 4793

Built-in styles are included for placing badges in active states in pill and list navigations. Mainly the bootstrap badges is use for display the navigation with counting of unread and read messages.

For display the notification (number of notifications), we can use the bootstrap badge.

For brief understand, please use the below example code and see the output screenshot. That will be easily clear and helpful to you.

Example:

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

<head>
<link href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h1> Bootstrap Badge </h1>

<ul class="nav nav-pills">
<li class="active"> <a href="#"> Inbox <span class="badge"> 556 </span> </a> </li>
<li class="active"> <a href="#"> Outbox <span class="badge"> 145 </span> </a> </li>
<li class="active"> <a href="#"> Trash <span class="badge"> 199 </span> </a> </li>
<li class="active"> <a href="#"> Messages <span class="badge"> 55 </span> </a> </li>
</ul>

</div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</html>