Monday, March 30, 2015

Badges in Bootstrap


Badges are similar to labels in Bootstrap,badges are mostly used to focus unread objects. They can also be used in links, navs and more other by adding span class: badge. Please test the example for more clearance in it .

Example:



 <!DOCTYPE html>  
 <html>  
 <head lang="en">  
   <meta charset="UTF-8"/>  
   <title>joeandy's workshop</title>  
   <meta name="viewport" content="width=device-width, initial-scale=1"/>  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>  
 </head>  
 <body>  
 <div class="container">  
 <h4>Badges in active state pills </h4>  
 <ul class="nav nav-pills">  
   <li class="active"><a href="#">Home <span class="badge">42</span></a></li>  
   <li><a href="#">Profile</a></li>  
   <li><a href="#">Message <span class="badge">3</span></a></li>  
 </ul>  
 <br>  
 </div>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>  
 </body>  
 </html>  


No comments:

Post a Comment