Bootstrap 5 Framework

List Groups

13 min Lesson 29 of 40

List Groups in Bootstrap 5

List groups are flexible and powerful components for displaying a series of content. They are most commonly used to display lists of items, navigation, and custom content.

Basic List Groups

Create a basic list group with list items:

<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>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>
    

List Group Structure:

.list-group - Container for list items
.list-group-item - Individual list items
Can use <ul> with <li> or <div> elements
Automatically handles borders and spacing

Active and Disabled Items

Indicate active and disabled states in list groups:

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">An active item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>
    

Actionable List Groups

Use anchor tags or buttons to create actionable list items:

<!-- With Links -->
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        The current link item
    </a>
    <a href="#" class="list-group-item list-group-item-action">A second link item</a>
    <a href="#" class="list-group-item list-group-item-action">A third link item</a>
    <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
    <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

<!-- With Buttons -->
<div class="list-group">
    <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
        The current button
    </button>
    <button type="button" class="list-group-item list-group-item-action">A second button item</button>
    <button type="button" class="list-group-item list-group-item-action">A third button item</button>
    <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
    

Tip: Use .list-group-item-action to create hover, focus, and active states for interactive list items.

Flush List Groups

Remove borders and rounded corners to render list groups edge-to-edge:

<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>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>
    

Numbered List Groups

Add numbers to list group items automatically:

<ol class="list-group list-group-numbered">
    <li class="list-group-item">A list item</li>
    <li class="list-group-item">A list item</li>
    <li class="list-group-item">A list item</li>
</ol>

<!-- Numbered with Custom Content -->
<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">Subheading</div>
            Content for list item
        </div>
        <span class="badge bg-primary rounded-pill">14</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">Subheading</div>
            Content for list item
        </div>
        <span class="badge bg-primary rounded-pill">14</span>
    </li>
</ol>
    

List Groups with Badges

Add badges to list group items for counts or status indicators:

<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-primary rounded-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        Sent
        <span class="badge bg-primary rounded-pill">99+</span>
    </li>
</ul>
    

Flexbox Alignment: Use .d-flex, .justify-content-between, and .align-items-center to properly align badges within list items.

List Groups with Custom Content

Add almost any HTML content within list group items:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small>3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small>And some small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1">List group item heading</h5>
            <small class="text-muted">3 days ago</small>
        </div>
        <p class="mb-1">Some placeholder content in a paragraph.</p>
        <small class="text-muted">And some muted small print.</small>
    </a>
</div>
    

Contextual Classes

Use contextual classes to style list items with background colors:

<ul class="list-group">
    <li class="list-group-item">A simple default list group item</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>
    

Contextual Classes with Actions

Combine contextual classes with actionable list items:

<div class="list-group">
    <a href="#" class="list-group-item list-group-item-action">A simple default list group item</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-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>
</div>
    

Horizontal List Groups

Change the layout of list groups from vertical to horizontal:

<!-- Always Horizontal -->
<ul class="list-group list-group-horizontal">
    <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>

<!-- Horizontal at Specific Breakpoint -->
<ul class="list-group list-group-horizontal-sm">
    <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>

<ul class="list-group list-group-horizontal-md">
    <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>
    

Horizontal Breakpoints:

.list-group-horizontal - Always horizontal
.list-group-horizontal-sm - Horizontal at ≥576px
.list-group-horizontal-md - Horizontal at ≥768px
.list-group-horizontal-lg - Horizontal at ≥992px
.list-group-horizontal-xl - Horizontal at ≥1200px

Checkboxes and Radios

Place Bootstrap's checkboxes and radios within list group items:

<!-- Checkboxes -->
<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
        <label class="form-check-label" for="firstCheckbox">First checkbox</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
        <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
        <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
    </li>
</ul>

<!-- Radios -->
<ul class="list-group">
    <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
        <label class="form-check-label" for="firstRadio">First radio</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
        <label class="form-check-label" for="secondRadio">Second radio</label>
    </li>
    <li class="list-group-item">
        <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
        <label class="form-check-label" for="thirdRadio">Third radio</label>
    </li>
</ul>
    

Practice Exercise

Create a task management interface with:

A numbered list group showing 5 tasks with completion badges
Each task item should have a title, description, and date
Use contextual colors: green for completed, yellow for in-progress
Add checkboxes to mark tasks as complete
Create a horizontal list group for task categories

Best Practices:

Use <ul> and <li> for static lists
Use <div> for interactive lists with links or buttons
Always include aria-current="true" for active items
Use .list-group-flush when placing list groups in cards
Combine flexbox utilities for complex layouts
Test horizontal list groups at different screen sizes