Bootstrap List Groups
List groups display a series of related items, like a to-do list, a settings menu, or search results, in a clean, consistent vertical list. The base class is .list-group applied to a <ul>, with .list-group-item on each <li>.
List group items can become clickable links or buttons, be marked active or disabled, and use contextual colors to convey meaning, similar to alerts.
<ul class="list-group">
<li class="list-group-item">Item</li>
</ul>Basic list groups
Wrap .list-group-item elements inside a <ul class="list-group"> for a simple bordered vertical list, great for displaying static information.
Interactive and colored items
Use <a> or <button> elements with .list-group-item and .list-group-item-action to make items clickable with hover effects. Add .active for the selected item and .list-group-item-{color} for contextual coloring.
<ul class="list-group">
<li class="list-group-item">Apple</li>
<li class="list-group-item">Banana</li>
<li class="list-group-item active">Cherry</li>
</ul>A vertical list of three items, with 'Cherry' highlighted as activelist-group-item styles each row, and active highlights the currently selected item.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Home</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Delete Account</a>
</div>Two clickable list items, the second shown with a red danger themelist-group-item-action adds hover styling for clickable links, and list-group-item-danger applies a warning color.
Key points
- .list-group and .list-group-item build a bordered vertical list.
- Use <a> or <button> with .list-group-item-action for clickable items.
- .active highlights the currently selected item.
- Contextual classes like .list-group-item-success add color meaning.