Nearby lessons
17 of 39📋 BS5 List Groups
📌 What Are Bootstrap 5 List Groups?
List groups display a series of items in a bordered list. Use .list-group on the <ul> or <ol> and .list-group-item on each <li>.
📋 Basic List Group (.list-group, .list-group-item)
.list-group – removes list bullets and adds borders. .list-group-item – styles each row (border, padding, background).
🎯 Active and Disabled Items (.active, .disabled)
.active – highlights the current item. .disabled – grays out and prevents interaction. Add to the .list-group-item.
🔗 Clickable Items (.list-group-item-action)
.list-group-item-action – makes the item look and behave like a link (hover, focus). Use with <a> or <button> as the list item, or wrap content in a link.
📐 Flush List (.list-group-flush)
.list-group-flush – removes outer borders and rounded corners so the list aligns with its container edges. Add to the same element as .list-group.
🔢 Numbered List (.list-group-numbered)
.list-group-numbered – use on an <ol> to show numbers before each .list-group-item.
✅ List Group Best Practices
- Use .list-group-item-action when items are links or buttons.
- Use .list-group-flush inside cards or full-width panels.
- Use .list-group-numbered for ordered steps or rankings.
🧠 Test Your Knowledge
3 QuestionsProgress: 0 / 3
Keep Going!BS5 Cards