What is badges in Bootstrap ?
Introduction: In Bootstrap v5, Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of Bootstrap v5, badges no longer have the focus or hover styles for links.
Approach: We can create badges .badge class within <span> elements to create rectangular badges. We can also create different badges variations using a contextual class (like .badge-secondary) with minimal effort. Below is the procedure to implement a simple badge in Bootstrap.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
Step 2: Add <span> tag in <body> tag.
<h1>GeeksForGeeks <span>New</span> </h1>
Step 3: Add the .badge class together with a contextual class (like .badge-secondary) within <span> elements.
<h1>GeeksForGeeks <span class="badge badge-secondary">New</span></h1>
Note: Users of screen readers and other assistive technology may find badges perplexing depending on how they’re utilized. While badges’ design gives users a visual clue as to what they are for, these users will only see the badge’s text. These badges may appear as random extra words or numbers at the end of a phrase, depending on the context.
Example 1: In this example, We will display badges in front of the text to highlight the text. In the below example, the “New” badge is displayed. Badges will be able to notify the user about any “New” post, or message that has been there on his account. Badges can be used as links to navigate directly to a webpage or web pages buttons to provide a counter.
Example 2: In the example, we will use badges inside a button that display the counter. It shows that the user has 4 Notifications, 10 Messages, and 2 updates. It will notify the user to check those notifications, messages, and updates. We can also change the background utility to change the color of badges. We can use red to show danger, or we can use a yellow color to show a warning, etc.
Example 3: In this example, We will also change our background utility classes to quickly modify the appearance of a badge. Please note that when using Bootstrap’s default .bg-light, you’ll likely need a text color utility like .text-dark for proper styling. This is because background utilities do not set anything but background color.
Note: Giving assistive technology a sense of purpose Color can be used to add meaning, but users of assistive technology, such as screen readers, will not be able to understand it. Ascertain that the information represented by the color is either apparent from the content itself (e.g. visible text) or is included through alternative means.