W3.CSS Badges

The .w3-badge class is used to add additional information to the content. For example, some websites associate some number of notifications to the link. The notification number is seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it. This class helps the developers to add circular badges to their website, the default color is set to black.

Example: Adding badges in the HTML Page.

Output:

👁 Image

Badges can be used anywhere on the HTML page. They can be used inside buttons, tables, paragraphs, lists, etc. They are very useful as they can be used anywhere on the page. We can even color them or change their size using W3.CSS for other classes.

Example: Adding colored badges on the HTML page.

Output:

👁 Image

Example: Adding badges of various sizes.

Output:

👁 Image

Although the default is a circular badge and there is no class for square badges, we can also make a square badge by using the w3-round class to reduce its border-radius.

Example: Adding square badges in the HTML page.

Output:

👁 Image