List group with badges in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a list group in Bootstrap?

A list group is a flexible and powerful component for displaying a series of content. It is often used to show lists of items with consistent styling and spacing.

beginner

How do you add a badge to a list group item in Bootstrap?

You add a <span> element with the class badge inside the list group item. The badge usually shows a count or label aligned to the right.

intermediate

What Bootstrap class aligns badges to the right inside list group items?

Flex utilities like d-flex justify-content-between align-items-center on the list-group-item align badges to the right. The badge is styled with classes like badge bg-primary rounded-pill.

beginner

Why use badges in list groups?

Badges provide extra information like counts, statuses, or labels next to list items. They help users quickly see important details without extra text.

beginner

Show the basic HTML structure for a Bootstrap list group with badges.

Use <ul class='list-group'> with <li class='list-group-item d-flex justify-content-between align-items-center'>. Inside each li, add a <span class='badge bg-primary rounded-pill'> for the badge.

Which Bootstrap class is used to create a list group?

A container

B list-group

C badge

D card

The class list-group creates a list group container in Bootstrap.

What class combination styles a badge with a pill shape and primary color?

A badge text-primary rounded

B badge bg-secondary rounded-circle

C badge bg-primary rounded-pill

D badge bg-danger

Use badge bg-primary rounded-pill to get a blue pill-shaped badge.

How do you align a badge to the right inside a list group item?

A Use flex utilities like <code>d-flex justify-content-between</code> on the list item

B Add <code>text-right</code> to the badge

C Use <code>float-right</code> on the badge

D Add <code>align-right</code> to the list group

Bootstrap uses flexbox with d-flex justify-content-between on the list item to space content and badge apart.

Which HTML element is typically used for badges inside list groups?

A <section>

B <div>

C <p>

D <span>

Badges are usually <span> elements for inline styling.

What is the main purpose of badges in list groups?

A Show extra info like counts or labels

B Add images

C Create links

D Change background color

Badges highlight important info such as numbers or statuses next to list items.

Explain how to create a Bootstrap list group with badges that show counts on the right side.

Think about using flexbox classes to space the badge and item text.

Describe why badges are useful in list groups and how they improve user experience.

Consider how badges add meaning without extra words.