Bootstrap List Groups

Overview

List groups are flexible components for displaying lists of content with various styles and options.

Basic List Group

<ul class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
</ul>

Active and Disabled Items

<ul class="list-group">
    <li class="list-group-item active">Active item</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item disabled">Disabled item</li>
</ul>

Links and Buttons

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active">Active link</a>
    <a href="#" class="list-group-item list-group-item-action">Link item</a>
    <a href="#" class="list-group-item list-group-item-action disabled">Disabled link</a>
</div>

With Badges

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Messages
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Notifications
        <span class="badge bg-primary rounded-pill">2</span>
    </li>
</ul>

Contextual Classes

<ul class="list-group">
    <li class="list-group-item">Default</li>
    <li class="list-group-item list-group-item-primary">Primary</li>
    <li class="list-group-item list-group-item-success">Success</li>
    <li class="list-group-item list-group-item-danger">Danger</li>
    <li class="list-group-item list-group-item-warning">Warning</li>
</ul>

Next Steps

Next: Bootstrap Cards →