• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Badges

June 25, 2014 //  by Krishna Srinivasan//  Leave a Comment

Badges are small and simple components which are used for displaying important notification to the user such as number of received messages, unread messages, number of friend requests, number of emails found in the inbox of email address etc. Badges are the little numbered icons which appear on the mail and SMS apps when we have new messages. Badges are looks like labels, but small difference is that the corners of the badges are more rounded. These are commonly used in networking websites and email of client.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

Bootstrap provides badge class which is used within span element to display unread messages as shown in the following example. If you have any questions about bootstrap badges, please write it in the comments section.

Bootstrap Badges Example

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Badges</h2>
<ul class="nav nav-pills"><br>
   <li><a href="#">Compose</a></li>
   <li ><a href="#">Inbox<span class="badge">12</span></a></li>
   <li><a href="#">Sent Mail</a></li>
   <li><a href="#">Drafts<span class="badge">8</span></a></li>
   <li><a href="#">Trash</a></li>
</ul>
</div>
</body>
</html>
  • Run Bootstrap Badges Example Demo

Bootstrap Badges Example

Active Nav States

It is possible to place badges in the active states of pills navigation by using badge class within span element to active links as shown in the following example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Active State in Pill</h2>
<ul class="nav nav-pills">
   <li><a href="#">Compose</a></li>
   <li class="active"><a href="#">Inbox<span class="badge">12</span></a></li>
   <li><a href="#">Sent Mail</a></li>
   <li><a href="#">Drafts<span class="badge">12</span></a></li>
   <li><a href="#">Trash</a></li>
</ul><br>
<h2>Active State in Navigations</h2>
<ul class="nav nav-pills nav-stacked">
   <li><a href="#">Compose</a></li>
   <li class="active"><a href="#">Inbox<span class="badge pull-right">12</span></a></li>
   <li><a href="#">Sent Mail</a></li>
   <li><a href="#">Drafts<span class="badge pull-right">8</span></a></li>
   <li><a href="#">Trash</a></li>
</ul>
</div>
</body>
</html>

The above script displays the badges in the active states of the pills navigations. We can display badge to right side of the page by using the .pull-right class within the badge class.

  • Run Bootstrap Active Nav States Example Demo

Bootstrap Active Nav States Example

Category: BootstrapTag: Bootstrap Components

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Bootstrap Labels
Next Post: Bootstrap Jumbotron »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact