Bootstrap Badges and Labels
Bootstrap Badges and Labels
Bootstrap Badges and Labels are small components in the Bootstrap framework that are used to add extra information to an element. They are often used to display the status of an item, the number of items in a list, or other information that needs to be highlighted.
Bootstrap Badges are typically used to display a numerical value, such as the number of unread messages in a mailbox. To create a badge, you can use the <span> element with the class badge, along with the number or text you want to display. Here is an example:
<span class="badge badge-primary">5</span>
This will display a blue badge with the number “5” in it. You can change the color of the badge by using a different class, such as badge-secondary, badge-success, badge-danger, badge-warning, badge-info, or badge-light.
Bootstrap Labels, on the other hand, are used to display a short text label, such as a status or a category. To create a label, you can use the <span> element with the class badge, along with the text you want to display. Here is an example:
<span class="badge badge-success">Active</span>
This will display a green label with the text “Active” in it. You can change the color of the label by using a different class, such as badge-secondary, badge-success, badge-danger, badge-warning, badge-info, or badge-light.
Both Badges and Labels can be used in a variety of contexts, such as on buttons, in lists, or next to other elements. They are a simple but effective way to add extra information to your user interface.