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


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

    This is a Default label.

  • 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

    This is a Primary label.

  • 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

    This is a Success label.

  • 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

    This is a Info label.

  • 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

    This is a Warning label.

  • 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

    This is a Danger label.

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 -

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.