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.