Bootstrap UI Kit

Basic List Group

An item
A second item
A third item
A fourth item

<ul class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>

List Group with Badges

Inbox 14
Drafts 3
Sent 42

<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Inbox <span class="badge bg-primary rounded-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Drafts <span class="badge bg-secondary rounded-pill">3</span>
    </li>
</ul>

List Group with Icons

Dashboard
Profile
Settings
Logout

<ul class="list-group">
    <li class="list-group-item"><i class="fas fa-home me-2"></i> Dashboard</li>
    <li class="list-group-item"><i class="fas fa-user me-2"></i> Profile</li>
    <li class="list-group-item"><i class="fas fa-cog me-2"></i> Settings</li>
</ul>

Action List Group

Active item Second item Third item Disabled item

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

Flush List Group

An item
A second item
A third item

<ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
</ul>

Checkbox List Group

First checkbox
Second checkbox
Third checkbox

<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-2" type="checkbox" checked> First checkbox
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-2" type="checkbox"> Second checkbox
    </li>
</ul>

Horizontal List Group

One
Two
Three

<ul class="list-group list-group-horizontal">
    <li class="list-group-item">One</li>
    <li class="list-group-item">Two</li>
    <li class="list-group-item">Three</li>
</ul>

List Groups