List groups

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches List groups—the ideas, syntax, and habits you need before moving on in Bootstrap.

Bootstrap patterns appear constantly in legacy apps and rapid admin UI work.

You will apply List groups in contexts like: Internal tools, WordPress themes, Laravel apps, and teams that want opinionated UI without writing every rule from scratch.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain List groups in your own words.

List groups style vertical lists of items—settings panels, menus, feeds. Markup: ul.list-group with li.list-group-item. Add list-group-item-action for clickable rows and active / disabled states.

Variants and layout

Contextual colors: list-group-item-success, etc.
With badges: flex utilities inside each item
Flush: list-group-flush removes outer borders to sit flush in cards

Compare to semantic HTML lists—Bootstrap adds interaction states while keeping list structure for screen readers.

Self-check

What class makes a list item look clickable?
When use list-group-flush inside a card?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

list-group vs nav pills—when each?
How do you show active state?

No discussion yet. Be the first to ask a question.