Bootstrap Badge
×

Bootstrap Badge

3707

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>

Result:




Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments