Lesson 12: Badges in Bootstrap 5

Badges in Bootstrap are essential when developing web and application applications. This guide examines how to use badges in Bootstrap with TipsMake.com!

If you frequently browse the web or use apps, you'll often see badges or emblems. These can be notification icons, navigation buttons, or markers for special content.

Badges in Bootstrap 5 are similar. They are small labels that display brief information. They are used to add supplementary information to other elements on a webpage.

Using badges in Bootstrap 5 is very easy. Basically, you just need to use the CSS classes ` .badge` and `badge-*` within your `span` or `div` tag. For example, if you want to create a green badge, you can use the following HTML code:

English example text

CSS classes like `.badge-pill` and `.badge-lg` help you create circular or larger badges. Here's an example of sample code to create a large red circular badge:

English example text

Additionally, you can use the `.badge-primary`, `.badge-secondary`, `.badge-success`, `.badge-info`, `.badge-warning`, `.badge-danger`, `.badge-light`, and `.badge-dark` classes to design badges in Bootstrap 5. Here are the detailed instructions:

Badges are often used to display additional information, marking items as new or unread. To create a badge, simply add it to links, navigation, etc.

When the additional information section is blank, the Badge will be collapsed via the selector.:empty

Badges are commonly used in several situations, as shown in the image below:

Contextual Badges

Use the class .badgealong with the context class (like ` .bg-secondary`) in the elements to create rectangular badges with corresponding colors. See the following example for a better understanding:

English example text

Examples of Badges

New Example Heading

Unread Articles 5

You Have New Messages 20+

Some Other HOT Examples

The result will be as follows:

Pill Badge

Besides rectangular badges with rounded corners, you can create softer-looking badges by using additional classes .rounded-pillaccordingly :

English example text

Examples of Badges

New Example Heading

Unread Articles 5

You Have New Messages 20+

Some Other HOT Examples

With the HTML file above, you will get the following badges:

A Badge Is Placed Inside an Object

You can place the active badge inside your website's navigation or any button. Simply place it next to the link or button, as in the following example:

English example text

Badge Inside the Button

 English example text 

The result will have the following interface:

At the end of this lesson, we've learned how to use Badges in some basic situations. Continue with the next lessons to better understand how to use Badges more effectively.