Bootstrap Badges and Labels, Bootstrap Badges, Bootstrap Labels, Lables in Bootstrap, Badges in Bootstrap

Bootstrap Badges and Labels

So now we came to next Label of Bootstrap. In this article i am going to tell you how to set up Badges and Labels in your website page. First of all we should know what is the different in Badges and Labels.

Different between Badges and Labels.

Badges:- Badges are basically numerical indicators its shows how many items are associated with this particular link.

Labels:- And Labels we use to provide some additional information about any particular things.

So First of all i will show you how to use Badges. To use Badge you have to use Bootstrap class .badge within the <span>.

As you already know we have to use Bootstrap CDN.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Example:- 

<a href="#">Sports News <span class="badge">5</span></a><br>
  <a href="#">All Comments <span class="badge">10</span></a><br>
  <a href="#">New Updates <span class="badge">2</span></a>

If you want Badges with more stylish then you can use Badges in Buttons also.

Your Badges will look like this.

Follow the Example:- 

<button type="button" class="btn btn-primary">Sports News <span class="badge">7</span></button>
  <button type="button" class="btn btn-success">All Comments <span class="badge">3</span></button>    
  <button type="button" class="btn btn-danger">New Updates <span class="badge">5</span></button>

Lables.

As i already told you Lables are used for some additional information. To use Lables you have to add class .lable within <span>. You can show you Lables with multiple colors by using some additional classes. Like .label-primary, label-success, .label-info etc. as we use for buttons.

Example:-

<h1>Example <span class="label label-default">New</span></h1>
  <h2>Example <span class="label label-primary">New</span></h2>
  <h3>Example <span class="label label-success">New</span></h3>
  <h4>Example <span class="label label-info">New</span></h4>
  <h5>Example <span class="label label-danger">New</span></h5>
  <h6>Example <span class="label label-warning">New</span></h6> 

Your Labels will look like this.