JavaBeat

  • Home
  • 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)
  • Privacy
  • Contact Us

Bootstrap Labels

June 25, 2014 by Krishna Srinivasan Leave a Comment

label represents a caption for an item in a user interface. It is used to add label to a form control like important notes, warning messages etc. We can also create catching labels and annotate text with inline labels. If we want to specify some important note related to its particular concept, then we can make use of inline label in Bootstrap.

also read:

  • Bootstrap Setup
  • Bootstrap Typography

Bootstrap Label Example

Bootstrap provides class called .label to display labels on the web page and can be used within span element as shown in the following example. If you have any questions about bootstrap labels, please write it in the comments section.

[code lang=”xml”]
<!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>
<h2>Bootstrap Label Example</h2>
<div class="container">
<h1>Bootstrap<span class="label label-default">label</span></h1>
<h2>Bootstrap<span class="label label-default">label</span></h2>
<h3>Bootstrap<span class="label label-default">label</span></h3>
<h4>Bootstrap<span class="label label-default">label</span></h4>
<h5>Bootstrap<span class="label label-default">label</span></h5>
<h6>Bootstrap<span class="label label-default">label</span></h6>
</div>
</body>
</html>
[/code]

Above script defines label class to display labels from h1 to h6 as specified within the div element.

  • Run Bootstrap Label Example Demo

Bootstrap Label Example

Labels using Modifier Classes

In Bootstrap, we can get different types of variations to change appearance of the inline labels. These can be listed as follows:

  • label-default
  • label-primary
  • label-success
  • label-info
  • label-warning
  • label-danger

The following is an example:

[code lang=”xml”]
<!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>Labels with Modifier Classes</h2><br>
<span class="label label-default">Default</span></h1>
<span class="label label-primary">Primary</span></h2>
<span class="label label-success">Success</span></h3>
<span class="label label-info">Info</span></h4>
<span class="label label-warning">Warning</span></h5>
<span class="label label-danger">Danger</span></h6>
</div>
</body>
</html>
[/code]

  • Run Bootstrap Labels Modifier Classes Example Demo

Bootstrap Labels Modifier Classes Example

Filed Under: Bootstrap Tagged With: 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.

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.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved