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

Share The Post On -

Add a Comment

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.