Bootstrap Badges and Labels for Web Development

Discover more about Bootstrap and its role in building websites and web-based applications. In this article, you will learn about the labels and badges used in Bootstrap, how to add them to your project, and their purpose and usage. To read more about it with coding examples, follow the StudySection blogs and improve your technical skills.

1. Bootstrap Badges and Labels
Bootstrap is a free and open-source framework for building websites and web-based
applications. It uses CSS, HTML, and Javascript to develop responsive and user-friendly mobile
applications. Beyond optional JavaScript, plugins, Bootstrap provides HTML and CSS templates
for for creating various elements such as modals, image carousels, forms, buttons, tables,
navigation, and many other uses.
Badges: Badges are the numbers or counts shown on the link to indicate how many items are
connected to the link.
For Example:
<a href="#">Comments <span class="badge">10</span></a><br>
Output:
Badges can also be used inside the button.
For Example:
<button type="button" class="btn btn-primary">
Comment <span class="badge badge-light">4</span>
</button>
Output:
Following are the modifier classes to be used to change the appearance of badges. Use the .badge
class within a <span> element.
●.badge-primary
●.badge-secondary
●.badge-success
●.badge-warning
●.badge-danger
●.badge-info
●.badge-light
●.badge-dark
Labels: Labels are used to provide additional information about something.

2. Following are the six contextual classes to create labels followed by the .label class within a
<span> element.
●.label-default (default label used)
●.label-primary (some important labels)
●.label-success (represent success or positive action)
●.label-info (informative label)
●.label-warning (represents an alert or negative action)
●.label-danger (indicates danger or negative action)
To read more on this topic and other technical topics, just follow the StudySection Blogs.