Javatpoint Logo
Javatpoint Logo

Bootstrap Badges and Labels


Bootstrap Badges

Bootstrap Badges are numerical indicators used to show that how many items are associated with the specific link. Badges are used to highlight new or unread items.

The class .badge within the <span> element is used to create badges.

Bootstrap Badge Example

Test it Now

Bootstrap Badge Example 2

You can also use badges inside other elements, such as buttons.

Let's take an example to see how to add badges to button.

Test it Now

Bootstrap Labels

Bootstrap labels are used to specify the additional information about something like offering counts, tips, or other makeup for pages.

The class .label is used to display the labels.


Bootstrap Label Example

Test it Now

Bootstrap Label Example 2: changing colors

We can change the label colors by using contextual label classes.

Test it Now

Bootstrap Label Example 3

Test it Now

Bootstrap 4 Badges

In Bootstrap 4, badges can also be used with heading tags (<h1>......<h6>). Use the .badge class together with a contextual class (like .badge-secondary) within <span> elements to create rectangular badges.

Example:

Test it Now

Contextual Badges

You can use the contextual classes to change the color of a badge.

Example:

Test it Now

Bootstrap 4 Pill Badges

Pill badges are used to make the badges more round. Use the class .badge-pill class to add pill badges.

Example:

Test it Now
Next TopicBootstrap Panels




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA