Badge component in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap badge code?

Look at this HTML snippet using Bootstrap classes. What will you see in the browser?

Bootsrap

<span class="badge bg-primary">New</span>

A A small blue pill-shaped label with white text 'New'

B A large red square with black text 'New'

C A plain text 'New' with no background or styling

D A button with the text 'New' and a blue border

💡 Hint

Bootstrap badges use the class 'badge' and color classes like 'bg-primary' for background color.

The badge class creates a small label with rounded corners. The bg-primary class gives it a blue background and white text by default.

❓ selector

intermediate

Which CSS selector targets all Bootstrap badges inside a navigation bar?

You want to style all badges inside a <nav> element with Bootstrap. Which selector correctly selects them?

A .badge nav

B nav .badge

C nav > badge

D .nav .badge

💡 Hint

Think about how to select elements with class inside a parent element.

The selector nav .badge selects any element with class badge inside a nav element, at any depth.

🧠 Conceptual

advanced

What ARIA role should a Bootstrap badge have to improve accessibility when it shows a notification count?

You have a badge showing the number of unread messages. Which ARIA role best describes this badge for screen readers?

A role="status"

B role="button"

C role="alert"

D role="presentation"

💡 Hint

The badge updates dynamically and should inform users politely without interrupting.

The status role announces changes politely to assistive technologies without interrupting the user.

❓ layout

advanced

How to position a Bootstrap badge at the top-right corner of a button?

You want a small badge to appear overlapping the top-right corner of a button. Which CSS approach works best?

Bootsrap

<button type="button" class="btn btn-primary position-relative">
  Notifications
  <span class="badge bg-danger position-absolute top-0 start-100 translate-middle">3</span>
</button>

A Use <code>float: right</code> on badge inside button

B Use <code>position: fixed</code> on badge with top and right set to 0

C Use <code>display: inline-block</code> on badge and <code>margin-left: auto</code> on button

D Use <code>position-relative</code> on button and <code>position-absolute top-0 start-100 translate-middle</code> on badge

💡 Hint

Bootstrap utilities for positioning use relative and absolute classes with translation helpers.

The button needs position-relative so the badge's position-absolute is relative to it. The classes top-0 start-100 translate-middle place the badge overlapping the top-right corner.

📝 Syntax

expert

What error does this Bootstrap badge code cause?

Examine this snippet and identify the error it causes in the browser:

Bootsrap

<span class="badge bg-primary" aria-label="New messages" role="button">New</span>

A The badge text is not visible because of missing color classes

B SyntaxError due to invalid attribute usage

C No error, but role="button" misleads screen readers since badge is not interactive

D The badge does not appear because <code>role="button"</code> disables styling

💡 Hint

Consider semantic meaning and accessibility roles for non-interactive elements.

The code is valid HTML and renders correctly. However, using role="button" on a non-clickable badge can confuse assistive technology users because it suggests the element is interactive when it is not.

Practice

1. What is the main purpose of a Bootstrap badge component?

easy

A. To style form input fields

B. To create large banners for page headers

C. To add navigation menus

D. To highlight small pieces of information like counts or labels

Solution

1. Step 1: Understand the badge role

   Badges are used to show small bits of info such as counts or labels next to text or buttons.

2. Step 2: Compare options

   Options A, B, and C describe other Bootstrap components or uses, not badges.

3. Final Answer:

   To highlight small pieces of information like counts or labels -> Option D

4. Quick Check:

   Badge = small info highlight [OK]

Hint: Badges show small info like numbers or labels [OK]

Common Mistakes:

• Confusing badges with navigation or headers
• Thinking badges style large elements
• Using badges for form inputs

2. Which of the following is the correct syntax to create a Bootstrap badge with a primary color?

easy

A. New

B. New

C. New

D. New

Solution

1. Step 1: Check Bootstrap badge syntax

   Bootstrap badges use a span with class badge plus a background color class like bg-primary.

2. Step 2: Validate each option

   New uses correct tags and classes. Options A, B, and D use incorrect tags or class names.

3. Final Answer:

   <span class="badge bg-primary">New</span> -> Option C

4. Quick Check:

   Use span.badge.bg-primary [OK]

Hint: Use <span> with classes badge and bg-color [OK]

Common Mistakes:

• Using <div> instead of <span>
• Missing the 'badge' class
• Using wrong class names like badge-primary

3. What will be the visual result of this code?

<button type="button" class="btn btn-secondary">Messages <span class="badge bg-danger">5</span></button>

medium

A. A secondary button labeled 'Messages' with a red badge showing number 5

B. A red button labeled 'Messages' with a secondary badge showing number 5

C. A button labeled 'Messages' with no badge visible

D. A secondary button labeled 'Messages' with a blue badge showing number 5

Solution

1. Step 1: Analyze button and badge classes

   The button uses btn btn-secondary which styles it gray. The badge uses badge bg-danger which styles it red.

2. Step 2: Understand visual output

   The button text is 'Messages' and the badge with number 5 appears in red next to it.

3. Final Answer:

   A secondary button labeled 'Messages' with a red badge showing number 5 -> Option A

4. Quick Check:

   btn-secondary + badge bg-danger = gray button + red badge [OK]

Hint: bg-danger means red badge color [OK]

Common Mistakes:

• Confusing button and badge colors
• Expecting badge to be blue or missing
• Ignoring badge inside button

4. Identify the error in this badge code:

<span class="badge badge-primary">99</span>

medium

A. The span tag cannot be used for badges

B. The class 'badge-primary' is outdated; should use 'bg-primary' instead

C. The number 99 is too large for a badge

D. Missing closing tag for span

Solution

1. Step 1: Check Bootstrap badge color class

   In Bootstrap 5+, color classes for badges use bg-primary, not badge-primary.

2. Step 2: Validate other parts

   The span tag is correct, number size is fine, and the closing tag is present.

3. Final Answer:

   The class 'badge-primary' is outdated; should use 'bg-primary' instead -> Option B

4. Quick Check:

   Use bg-primary, not badge-primary [OK]

Hint: Use bg-primary for badge color, not badge-primary [OK]

Common Mistakes:

• Using old Bootstrap 4 class names
• Thinking span is invalid tag
• Assuming number size matters

5. You want to add a badge inside a navigation link that shows the number of unread notifications. Which is the best way to do this for accessibility and styling?

<a href="#" class="nav-link">Notifications <?></a>

What should replace <?>?

hard

A. <span class="badge bg-info" aria-label="unread notifications">3</span>

B. <div class="badge bg-info">3</div>

C. <span class="badge bg-info"><strong>3</strong></span>

D. <span class="badge bg-info" role="button">3</span>

Solution

1. Step 1: Choose correct tag and classes

   Badges should use span with badge and color class like bg-info.

2. Step 2: Add accessibility attribute

   Adding aria-label describes the badge meaning for screen readers, improving accessibility.

3. Final Answer:

   <span class="badge bg-info" aria-label="unread notifications">3</span> -> Option A

4. Quick Check:

   Use span.badge with aria-label for accessibility [OK]

Hint: Use aria-label on badge span for screen readers [OK]

Common Mistakes:

• Using div inside links (invalid HTML)
• Adding role=button unnecessarily
• Not adding aria-label for accessibility