Tutorial on How to Make Bootstrap 3 Badges and Labels

In this post we are going to discuss about 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 order have been submitted. The color of the text and background color of Bootstrap 3 Badges is compatible with the parrent tag.

To use a Badges give the class andme .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 rounded borderd area.Labels are 6 types and they are:

  • Default label.

    its background is gray and dtext color is white and border is rounded, to use it give class andme .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 dtext color is white and border is rounded, to use it give class andme .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 dtext color is white and border is rounded, to use it give class andme .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 dtext color is white and border is rounded, to use it give class andme .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 dtext color is white and border is rounded, to use it give class andme .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 dtext color is white and border is rounded, to use it give class andme .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 usefull.

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.