List group component in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a list group in Bootstrap?

A list group in Bootstrap is a flexible and powerful component for displaying a series of content items in a vertical list with consistent spacing and styling.

beginner

How do you create a basic list group in Bootstrap?

Use a <ul> or <div> with the class list-group. Each item inside should have the class list-group-item.

beginner

How can you make a list group item active or highlighted?

Add the class active to the list-group-item you want to highlight. It changes the background and text color to show it is selected.

intermediate

What class do you add to make list group items clickable links?

Use <a> tags with the class list-group-item list-group-item-action. This makes the items interactive and keyboard accessible.

intermediate

How do you add badges or extra info to list group items?

Place a <span> with the class badge bg-primary rounded-pill inside the list-group-item. This shows a small colored label on the right side.

Which class is required on the container to create a Bootstrap list group?

A list-group

B list-item

C group-list

D list-container

The container must have the class list-group to apply Bootstrap's list group styles.

How do you make a list group item appear selected or active?

A Add class <code>selected</code>

B Add class <code>active</code>

C Add class <code>highlight</code>

D Add class <code>focus</code>

Adding the class active highlights the list group item as selected.

Which tag and classes make list group items clickable links?

A <code>&lt;button&gt;</code> with <code>list-group-item</code>

B <code>&lt;div&gt;</code> with <code>list-group-item-action</code>

C <code>&lt;a&gt;</code> with <code>list-group-item list-group-item-action</code>

D <code>&lt;span&gt;</code> with <code>list-group-item</code>

Using <a> tags with both list-group-item and list-group-item-action makes items clickable and accessible.

What class combination is used to add a badge to a list group item?

A badge-primary pill-rounded

B badge-pill bg-primary

C badge rounded bg-primary

D badge bg-primary rounded-pill

The correct classes are badge bg-primary rounded-pill to style badges properly.

Which HTML element is NOT typically used for list group items?

A <code>&lt;table&gt;</code>

B <code>&lt;a&gt;</code>

C <code>&lt;button&gt;</code>

D <code>&lt;li&gt;</code>

The <table> element is not used for list group items; list groups use <li>, <a>, or <button>.

Explain how to create a basic Bootstrap list group with three items, including one active item.

Think about the container and item classes needed.

Describe how to make list group items interactive links and add badges to them.

Focus on tags and classes for links and badges.