Badge component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Bootstrap badge component used for?

A Bootstrap badge is a small count or label that helps highlight new or unread items, status, or counts next to text or icons.

beginner

How do you add a badge to a button in Bootstrap?

You add a <span> with class badge inside the button element. For example: <br><button class='btn btn-primary'>Inbox <span class='badge bg-secondary'>4</span></button>

beginner

What class do you use to change the color of a Bootstrap badge?

Use background utility classes like bg-primary, bg-success, bg-danger, etc., on the badge element to change its color.

beginner

How can you make a badge appear as a pill shape in Bootstrap?

Add the class rounded-pill to the badge element to make it have rounded edges like a pill.

intermediate

What accessibility feature should you consider when using badges?

Ensure badges have sufficient color contrast and use semantic HTML so screen readers can understand the badge content. Also, use aria-label if the badge content is not clear alone.

Which class is required to create a badge in Bootstrap?

A marker

B label

C badge

D tag

The class badge is used to create badge components in Bootstrap.

How do you make a Bootstrap badge have a pill shape?

A Add class rounded-pill

B Add class pill-badge

C Add class badge-pill

D Add class pill

The class rounded-pill makes badges pill-shaped in Bootstrap.

Which class changes the badge background color to green in Bootstrap?

A bg-danger

B bg-success

C bg-primary

D bg-warning

bg-success applies a green background color to badges.

Where should you place the badge element to show a count on a button?

A Inside the button element

B Outside the button element

C Before the button element

D In a separate div

The badge <span> should be inside the button element to appear attached.

What should you check to make badges accessible?

A Badge animation

B Badge size only

C Badge font only

D Color contrast and semantic HTML

Good color contrast and semantic HTML help badges be accessible to all users.

Explain how to create a badge in Bootstrap and customize its color and shape.

Think about the classes you add to a <span> element inside buttons or text.

Describe why accessibility matters for badges and how to improve it.

Consider users who rely on screen readers or have vision difficulties.