Bootstrap | Badges and Breadcrumbs

Badges:

Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it.

Example:

Output:

👁 bagdes

Contextual Variations: Badges can be used as part of links or buttons to provide a counter. Depending on how they are used, badges must be confusing for the users, for this purpose different colors of variations are used so that the user may not get confused. 

Example:

Output:

👁 badges

Pill Badges: The badges that use class = "badge-pill" to make the corner more rounded. 

Example:

Output:

👁 badges

Badges as Link: Badges can also be used as a direct link to the new page. 

Example:

Output:

👁 badges-as-link

Breadcrumbs:

It is used to indicate the current page location with a navigational hierarchy. It adds separators automatically using CSS. It provides a backlink to each previous page the user navigates through. 

Example 1:

Output:

👁 breadcrumbs

Example 2:

Output:

👁 breadcrumbs

Example 3:

Output:

👁 breadcrumbs

Supported Browser:

• Google Chrome
• Microsoft Edge
• Firefox
• Opera
• Safari