Tutorial on How to Make Bootstrap 3 Badges and Labels

In this post, we are going to discuss Bootstrap 3 Badges and Labels,

Bootstrap 3 Badges

The Badges are the number indicator of a button or text, it is mainly used to show how many messages or orders have been submitted. The color of the text and background color of Bootstrap 3 Badges are compatible with the parent tag.

To use Badges give the class and .badge to a span tag.

Example:

Try it yourself

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

Bootstrap 3 Labels

The Labels are the character or text indicator of a heading or a text, it is a rounded bordered area. Labels are 6 types and they are:

• Default label.

  its background is gray and text color is white and the border is rounded, to use it give the class.label and .label-default to a span

  Example:

   

  Try it yourself

  		<p>This is a <span class="label label-default">Default</span> label.</p>
  

• Primary label.

  its background is blue and text color is white and the border is rounded, to use it give the class.label and .label-primary to a span

  Example:

   

  Try it yourself

  		<p>This is a <span class="label label-primary">Primary</span> label.</p>
  

• Success label.

  its background is green and text color is white and the border is rounded, to use it give the class.label and .label-success to a span

  Example:

   

  Try it yourself

  		<p>This is a <span class="label label-success">Success</span> label.</p>
  

• Info label.

  its background is sky blue and text color is white and the border is rounded, to use it give the class.label and .label-info to a span

  Example:

   

  Try it yourself

  		<p>This is a <span class="label label-info">Info</span> label.</p>
  

• Warning label.

  its background is deep yellow and text color is white and the border is rounded, to use it give the class .label and .label-warning to a span

  Example:

   

  Try it yourself

  		<p>This is a <span class="label label-warning">Warning</span> label.</p>
  

• Danger label.

  its background is red and text color is white and the border is rounded, to use it give the class .label and .label-danger to a span

  Example:

   

  Try it yourself

  		<p>This is a <span class="label label-danger">Danger</span> label.</p>
  

We have learned Bootstrap 3 Badges and Labels and hope it have helped you. Please provide your comment to make the site better and more useful.

Thanks for Reading