Bootstrap List Groups

A List Group is a Bootstrap component used to display related items together in a vertical or horizontal list.

For example, a website can use a List Group to display:

• Course categories
• Student names
• Notifications
• Messages
• Settings
• Navigation options

<ul class="list-group">

    <li class="list-group-item">
    HTML
    </li>

    <li class="list-group-item">
    CSS
    </li>

</ul>

The .list-group class creates the main List Group container.

<ul class="list-group">

    <li class="list-group-item">
    HTML
    </li>

    <li class="list-group-item">
    CSS
    </li>

    <li class="list-group-item">
    JavaScript
    </li>

</ul>

• HTML
• CSS
• JavaScript

The .list-group class is applied to the parent element that contains the list items.

<ul class="list-group">

    ...

</ul>

It provides the basic Bootstrap styling and layout for the List Group.

The .list-group-item class styles each individual item in the List Group.

<li class="list-group-item">

    Student 1

</li>

• Student 1
• Student 2
• Student 3

A List Group can use links as individual items. This is useful when each item should navigate to another page.

<div class="list-group">

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

    HTML Tutorial

    </a>

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

    CSS Tutorial

    </a>

</div>

The .list-group-item-action class makes links and buttons behave like interactive List Group items.

<a
href="#"
class="list-group-item
list-group-item-action">

Open Course

</a>

This class also provides useful interactive states such as hover and focus styling.

Use the .active class to indicate the currently selected List Group item.

<a
href="#"
class="list-group-item
list-group-item-action active"
aria-current="true">

Bootstrap

</a>

The .disabled class can be used to indicate that a List Group item is unavailable.

<a
href="#"
class="list-group-item
list-group-item-action disabled"
aria-disabled="true">

Coming Soon

</a>

The .list-group-flush class removes some outer borders and rounded corners when a List Group is placed inside another container such as a card.

<ul class="list-group list-group-flush">

    <li class="list-group-item">
    Home
    </li>

    <li class="list-group-item">
    About
    </li>

    <li class="list-group-item">
    Contact
    </li>

</ul>

Use .list-group-numbered to create a numbered List Group.

<ol class="list-group list-group-numbered">

    <li class="list-group-item">
    Introduction
    </li>

    <li class="list-group-item">
    HTML
    </li>

    <li class="list-group-item">
    CSS
    </li>

</ol>

1. Introduction
2. HTML
3. CSS

Badges can be placed inside List Group items to display counts, statuses, or other small pieces of information.

<li
class="list-group-item
d-flex
justify-content-between
align-items-center">

Messages

<span class="badge
text-bg-primary
rounded-pill">

5

</span>

</li>

• Messages 5
• Notifications 8

Interactive List Group links can also contain badges.

<a
href="#"
class="list-group-item
list-group-item-action
d-flex
justify-content-between
align-items-center">

Messages

<span
class="badge
text-bg-primary
rounded-pill">

12

</span>

</a>

Bootstrap provides contextual classes that allow List Group items to communicate different meanings.

Common classes include:

• list-group-item-primary
• list-group-item-success
• list-group-item-danger
• list-group-item-warning
• list-group-item-info
• list-group-item-light
• list-group-item-dark

<li
class="list-group-item
list-group-item-success">

Success

</li>

The list-group-item-success class can indicate a successful or positive item.

<li
class="list-group-item
list-group-item-success">

Payment Completed

</li>

• Payment Completed
• Assignment Submitted

The list-group-item-danger class can communicate an error, problem, or important warning.

<li
class="list-group-item
list-group-item-danger">

Payment Failed

</li>

• Payment Failed
• Assignment Missing

The list-group-item-warning class can be used for warning messages.

<li
class="list-group-item
list-group-item-warning">

Payment Pending

</li>

• Payment Pending
• Document Required

The list-group-item-info class can be used for informational content.

<li
class="list-group-item
list-group-item-info">

New course available.

</li>

• New course available.
• New lesson published.

A List Group item can contain multiple elements such as headings and descriptions.

<a
href="#"
class="list-group-item
list-group-item-action">

    <div
    class="d-flex
    w-100
    justify-content-between">

        <h5 class="mb-1">
        Bootstrap
        </h5>

        <small>
        Today
        </small>

    </div>

    <p class="mb-1">
    Learn Bootstrap components.
    </p>

    <small>
    Beginner level
    </small>

</a>

The .list-group-horizontal class displays List Group items horizontally instead of vertically.

<ul
class="list-group
list-group-horizontal">

    <li
    class="list-group-item">

    Home

    </li>

    <li
    class="list-group-item">

    About

    </li>

    <li
    class="list-group-item">

    Contact

    </li>

</ul>

• Home
• About
• Contact

Bootstrap also provides breakpoint-specific horizontal List Group classes.

Examples include:

• list-group-horizontal-sm
• list-group-horizontal-md
• list-group-horizontal-lg
• list-group-horizontal-xl
• list-group-horizontal-xxl

<ul
class="list-group
list-group-horizontal-md">

    ...

</ul>

This allows the List Group to change its layout at a chosen responsive breakpoint.

Buttons can be used as interactive List Group items when an action should happen instead of navigation.

<div class="list-group">

    <button
    type="button"
    class="list-group-item
    list-group-item-action">

    Edit Student

    </button>

    <button
    type="button"
    class="list-group-item
    list-group-item-action">

    Delete Student

    </button>

</div>

List Groups are often placed inside Cards to create menus and dashboard sections.

<div class="card">

    <div class="card-header">

    Student Menu

    </div>

    <ul class="list-group list-group-flush">

        <li class="list-group-item">
        Profile
        </li>

        <li class="list-group-item">
        Attendance
        </li>

        <li class="list-group-item">
        Fees
        </li>

    </ul>

</div>

List Groups are useful for displaying notifications and messages.

<div class="list-group">

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

        <div
        class="d-flex
        w-100
        justify-content-between">

            <h6 class="mb-1">
            New Assignment
            </h6>

            <small>
            5 min ago
            </small>

        </div>

        <small>
        A new assignment was added.
        </small>

    </a>

</div>

An admin panel can use a List Group to display student-related actions.

<div class="list-group">

    <a
    href="students.php"
    class="list-group-item
    list-group-item-action">

    All Students

    </a>

    <a
    href="attendance.php"
    class="list-group-item
    list-group-item-action">

    Attendance

    </a>

    <a
    href="fees.php"
    class="list-group-item
    list-group-item-action">

    Fee Management

    </a>

</div>

A tutorial website can use a List Group to display course categories.

<div class="list-group">

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

    HTML

    </a>

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

    CSS

    </a>

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

    JavaScript

    </a>

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

    Python

    </a>

</div>

In PHP applications, List Group items can be generated dynamically from arrays or database records.

<?php

$courses = [
    "HTML",
    "CSS",
    "Bootstrap",
    "JavaScript"
];

?>

<div class="list-group">

<?php foreach($courses as $course): ?>

    <a
    href="#"
    class="list-group-item
    list-group-item-action">

    <?php echo $course; ?>

    </a>

<?php endforeach; ?>

</div>

List Groups should be structured according to their purpose and should remain understandable to keyboard and assistive technology users.

• Use lists for collections of related items.
• Use links when items navigate to another page.
• Use buttons when items perform an action.
• Use aria-current for the current item when appropriate.
• Use meaningful link and button text.
• Do not rely only on color to communicate status.

<a
href="#"
class="list-group-item
list-group-item-action active"
aria-current="true">

Current Page

</a>

Avoid these common mistakes when using Bootstrap List Groups:

• Forgetting the .list-group class.
• Forgetting the .list-group-item class.
• Using links without .list-group-item-action when an interactive appearance is needed.
• Using too many items without organization.
• Using color as the only way to communicate status.
• Forgetting to indicate the active item.
• Using links for actions that should actually be buttons.
• Ignoring responsive behavior.
• Creating unnecessarily long List Groups.

A tutorial sidebar can use a List Group to display lessons and highlight the current lesson.

<div class="list-group">

    <a
    href="bootstrap_intro.php"
    class="list-group-item
    list-group-item-action">

    Introduction

    </a>


    <a
    href="bootstrap_buttons.php"
    class="list-group-item
    list-group-item-action">

    Buttons

    </a>


    <a
    href="bootstrap_list_groups.php"
    class="list-group-item
    list-group-item-action active"
    aria-current="true">

    List Groups

    </a>


    <a
    href="bootstrap_progress.php"
    class="list-group-item
    list-group-item-action">

    Progress Bars

    </a>

</div>

This complete example combines a List Group, active item, badges, contextual styling, and actionable links.

<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">

            Bootstrap

            </h5>

            <span
            class="badge
            text-bg-primary
            rounded-pill">

            30

            </span>

        </div>

        <p class="mb-1">

        Learn Bootstrap components.

        </p>

        <small>

        Current Lesson

        </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">

            Pagination

            </h5>

            <span
            class="badge
            text-bg-success
            rounded-pill">

            28

            </span>

        </div>

        <p class="mb-1">

        Learn Bootstrap pagination.

        </p>

        <small>

        Completed

        </small>

    </a>


    <a
    href="#"
    class="list-group-item
    list-group-item-action
    list-group-item-warning">

        <div
        class="d-flex
        w-100
        justify-content-between">

            <h5 class="mb-1">

            Dropdowns

            </h5>

            <span
            class="badge
            text-bg-warning">

            Pending

            </span>

        </div>

        <p class="mb-1">

        Review Bootstrap Dropdowns.

        </p>

    </a>


</div>