List Group

Examples

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

List Group on Bootstrap

Basic Example

                                    
                                        <ul class="list-group">
                                            <li class="list-group-item"><i class="ti ti-cloud me-1 align-middle fs-xl"></i> Dropbox Cloud Storage</li>
                                            <li class="list-group-item"><i class="ti ti-brand-slack me-1 align-middle fs-xl"></i> Slack Team Collaboration</li>
                                            <li class="list-group-item"><i class="ti ti-brand-windows me-1 align-middle fs-xl"></i> Microsoft Windows OS</li>
                                            <li class="list-group-item"><i class="ti ti-device-desktop-analytics me-1 align-middle fs-xl"></i> Zendesk Customer Support</li>
                                            <li class="list-group-item"><i class="ti ti-brand-stripe me-1 align-middle fs-xl"></i> Stripe Payment Integration</li>
                                        </ul>

The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

Dropbox Cloud Storage
Slack Team Collaboration
Microsoft Windows OS
Zendesk Customer Support
Stripe Payment Integration

Active Items

                                    
                                        <ul class="list-group">
                                            <li class="list-group-item active"><i class="ti ti-brand-github me-1 align-middle fs-xl"></i> GitHub Repository</li>
                                            <li class="list-group-item"><i class="ti ti-brand-figma me-1 align-middle fs-xl"></i> Figma Design Tool</li>
                                            <li class="list-group-item"><i class="ti ti-brand-notion me-1 align-middle fs-xl"></i> Notion Workspace</li>
                                            <li class="list-group-item"><i class="ti ti-brand-trello me-1 align-middle fs-xl"></i> Trello Task Manager</li>
                                            <li class="list-group-item"><i class="ti ti-cloud me-1 align-middle fs-xl"></i> DigitalOcean Cloud</li>
                                        </ul>

Add .active to a .list-group-item to indicate the current active selection.

GitHub Repository
Figma Design Tool
Notion Workspace
Trello Task Manager
DigitalOcean Cloud

Disabled Items

                                    
                                        <ul class="list-group">
                                            <li class="list-group-item disabled" aria-disabled="true"><i class="ti ti-cloud me-1 align-middle fs-xl"></i> Dropbox Cloud Storage</li>
                                            <li class="list-group-item"><i class="ti ti-brand-slack me-1 align-middle fs-xl"></i> Slack Team Collaboration</li>
                                            <li class="list-group-item"><i class="ti ti-brand-windows me-1 align-middle fs-xl"></i> Microsoft Windows OS</li>
                                            <li class="list-group-item"><i class="ti ti-device-desktop-analytics me-1 align-middle fs-xl"></i> Zendesk Customer Support</li>
                                            <li class="list-group-item"><i class="ti ti-brand-stripe me-1 align-middle fs-xl"></i> Stripe Payment Integration</li>
                                        </ul>

Add .disabled to a .list-group-item to make it appear disabled.

Dropbox Cloud Storage
Slack Team Collaboration
Microsoft Windows OS
Zendesk Customer Support
Stripe Payment Integration

Links and Buttons

                                      
                                        <div class="list-group">
                                            <a href="#" class="list-group-item list-group-item-action active">
                                                Stripe Payment Integration
                                            </a>
                                            <a href="#" class="list-group-item list-group-item-action">Dropbox Cloud Service</a>
                                            <button type="button" class="list-group-item list-group-item-action">Slack Communication</button>
                                            <button type="button" class="list-group-item list-group-item-action">Notion Productivity App</button>
                                            <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Zendesk Support Tool</a>
                                        </div>

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action.

Stripe Payment Integration Dropbox Cloud Service Zendesk Support Tool

Flush

                                    
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item">Slack Collaboration Tool</li>
                                            <li class="list-group-item">Dropbox Cloud Storage</li>
                                            <li class="list-group-item">Notion Workspace Organizer</li>
                                            <li class="list-group-item">Zendesk Customer Support</li>
                                            <li class="list-group-item">Stripe Payment Processor</li>
                                        </ul>

Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

Slack Collaboration Tool
Dropbox Cloud Storage
Notion Workspace Organizer
Zendesk Customer Support
Stripe Payment Processor

Horizontal

                                    
                                        <ul class="list-group list-group-horizontal mb-3">
                                            <li class="list-group-item">Slack</li>
                                            <li class="list-group-item">Notion</li>
                                            <li class="list-group-item">Dropbox</li>
                                        </ul>
        
                                        <ul class="list-group list-group-horizontal-sm mb-3">
                                            <li class="list-group-item">Figma</li>
                                            <li class="list-group-item">Stripe</li>
                                            <li class="list-group-item">Zendesk</li>
                                        </ul>
        
                                        <ul class="list-group list-group-horizontal-md">
                                            <li class="list-group-item">Trello</li>
                                            <li class="list-group-item">Asana</li>
                                            <li class="list-group-item">ClickUp</li>
                                        </ul>

Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width.

Slack
Notion
Dropbox

Figma
Stripe
Zendesk

Trello
Asana
ClickUp

Contextual Classes

                                    
                                        <ul class="list-group">
                                            <li class="list-group-item">Dapibus ac facilisis in</li>
                                            <li class="list-group-item list-group-item-primary">A simple primary
                                                list group item</li>
                                            <li class="list-group-item list-group-item-secondary">A simple secondary
                                                list group item</li>
                                            <li class="list-group-item list-group-item-success">A simple success
                                                list group item</li>
                                            <li class="list-group-item list-group-item-danger">A simple danger list
                                                group item</li>
                                            <li class="list-group-item list-group-item-warning">A simple warning
                                                list group item</li>
                                            <li class="list-group-item list-group-item-info">A simple info list
                                                group item</li>
                                            <li class="list-group-item list-group-item-light">A simple light list
                                                group item</li>
                                            <li class="list-group-item list-group-item-dark">A simple dark list
                                                group item</li>
                                        </ul>

Use contextual classes to style list items with a stateful background and color.

Dapibus ac facilisis in
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

Contextual Classes with Link

                                    
                                        <div class="list-group">
                                            <a href="#" class="list-group-item list-group-item-action">Darius ac facilities in</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
                                            <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
                                        </div>

Use contextual classes to style list items with a stateful background and color.

Darius ac facilities in A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

Custom Content

                                    
                                        <a href="#" class="list-group-item list-group-item-action active">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-2">List group item heading</h5>
                                                <small>3 days ago</small>
                                            </div>
                                            <p class="mb-1">Donec id elit non mi porta gravida at eget metus.
                                                Maecenas sed diam eget risus varius blandit.</p>
                                            <small>Donec id elit non mi porta.</small>
                                        </a>

                                        <a href="#" class="list-group-item list-group-item-action">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-2">List group item heading</h5>
                                                <small class="text-muted">3 days ago</small>
                                            </div>
                                            <p class="mb-1">Donec id elit non mi porta gravida at eget metus.
                                                Maecenas sed diam eget risus varius blandit.</p>
                                            <small class="text-muted">Donec id elit non mi porta.</small>
                                        </a>
                                        
                                        <a href="#" class="list-group-item list-group-item-action">
                                            <div class="d-flex w-100 justify-content-between">
                                                <h5 class="mb-2">List group item heading</h5>
                                                <small class="text-muted">3 days ago</small>
                                            </div>
                                            <p class="mb-1">Donec id elit non mi porta gravida at eget metus.
                                                Maecenas sed diam eget risus varius blandit.</p>
                                            <small class="text-muted">Donec id elit non mi porta.</small>
                                        </a>

Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

With Badges

                                    
                                        <ul class="list-group">
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                Gmail Notifications
                                                <span class="badge bg-primary rounded-pill">14</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                Unprocessed Orders
                                                <span class="badge bg-success rounded-pill">2</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                Urgent Tickets
                                                <span class="badge bg-danger rounded-pill">99+</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                Completed Transactions
                                                <span class="badge bg-success rounded-pill">20+</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                Invoices Awaiting Approval
                                                <span class="badge bg-warning rounded-pill">12</span>
                                            </li>
                                        </ul>

Add badges to any list group item to show unread counts, activity, and more with the help of some utilities.

Gmail Notifications 14
Unprocessed Orders 2
Urgent Tickets 99+
Completed Transactions 20+
Invoices Awaiting Approval 12

Checkboxes and Radios

                                    
                                        <ul class="list-group">
                                            <li class="list-group-item">
                                                <input class="form-check-input me-1" type="checkbox" value="" id="newsletterCheckbox">
                                                <label class="form-check-label" for="newsletterCheckbox">Subscribe to newsletter</label>
                                            </li>
                                            <li class="list-group-item">
                                                <input class="form-check-input me-1" type="checkbox" value="" id="termsCheckbox">
                                                <label class="form-check-label" for="termsCheckbox">Accept terms and conditions</label>
                                            </li>
                                        </ul>

                                        <ul class="list-group mt-2">
                                            <li class="list-group-item">
                                                <input class="form-check-input me-1" type="radio" name="notificationOptions" value="" id="emailRadio" checked>
                                                <label class="form-check-label" for="emailRadio">Notify by Email</label>
                                            </li>
                                            <li class="list-group-item">
                                                <input class="form-check-input me-1" type="radio" name="notificationOptions" value="" id="smsRadio">
                                                <label class="form-check-label" for="smsRadio">Notify by SMS</label>
                                            </li>
                                        </ul>

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.

Subscribe to newsletter
Accept terms and conditions

Notify by Email
Notify by SMS

Numbered

                                    
                                        <ol class="list-group list-group-numbered">
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="ms-2 me-auto">
                                                    <div class="fw-bold">INSPINIA Admin</div>
                                                    INSPINIA Admin
                                                </div>
                                                <span class="badge bg-primary rounded-pill">865</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="ms-2 me-auto">
                                                    <div class="fw-bold">INSPINIA React Admin</div>
                                                    INSPINIA React Admin
                                                </div>
                                                <span class="badge bg-primary rounded-pill">140</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-start">
                                                <div class="ms-2 me-auto">
                                                    <div class="fw-bold">Angular Version</div>
                                                    Angular Version
                                                </div>
                                                <span class="badge bg-primary rounded-pill">85</span>
                                            </li>
                                        </ol>

Numbers are generated by counter-reset on the <ol>, and then styled and placed with a ::before psuedo-element on the <li> with counter-increment and content.