##### Default List

Use `list-group` class in an unordered list and `list-group-item` class to create a default list group.

- Buy fresh vegetables for dinner
- Pick up groceries from the store
- Order takeout for the family tonight
- Prepare snacks for the movie night
- Plan a weekend picnic in the park

    <ul class="list-group">
        <li class="list-group-item">Buy fresh vegetables for dinner</li>
        <li class="list-group-item">Pick up groceries from the store</li>
        <li class="list-group-item">Order takeout for the family tonight</li>
        <li class="list-group-item">Prepare snacks for the movie night</li>
        <li class="list-group-item">Plan a weekend picnic in the park</li>
    </ul>

##### Active Item List

Use `active` class to `list-group-item` to indicate the current active selection.

- Currently selected task in progress
- Complete the project proposal by Friday
- Schedule a meeting with the team
- Review the budget for next quarter
- Prepare presentation for client meeting

    <ul class="list-group">
    <li class="list-group-item active" aria-current="true">Currently selected task in progress</li>
    <li class="list-group-item">Complete the project proposal by Friday</li>
    <li class="list-group-item">Schedule a meeting with the team</li>
    <li class="list-group-item">Review the budget for next quarter</li>
    <li class="list-group-item">Prepare presentation for client meeting</li>
    </ul>

##### Disabled Items List

Use `disabled` class to `list-group-item` to make it appear disabled.

- Currently unavailable item in stock
- Fresh organic apples from local farm
- Ripe bananas perfect for smoothies today
- Sweet cherries for your summer desserts
- Dried dates, great for snacking anytime

    <ul class="list-group">
    <li class="list-group-item disabled" aria-disabled="true">Currently unavailable item in stock</li>
    <li class="list-group-item">Fresh organic apples from local farm</li>
    <li class="list-group-item">Ripe bananas perfect for smoothies today</li>
    <li class="list-group-item">Sweet cherries for your summer desserts</li>
    <li class="list-group-item">Dried dates, great for snacking anytime</li>
    </ul>

##### List with Link

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

The current link item A second link item A third link item A fourth link item A disabled link item

    <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" aria-disabled="true">A disabled link item</a>
    </div>

##### List with Button

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

    <div class="list-group">
    <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    Simply dummy text of the printing
    <span class="badge float-end bg-primary">243</span>
    </button>
    <button type="button" class="list-group-item list-group-item-action">
    There are many variations of passages
    <span class="badge float-end bg-secondary-subtle text-secondary">35</span>
    </button>
    <button type="button" class="list-group-item list-group-item-action">
    All the Lorem Ipsum generators
    <span class="badge float-end bg-info-subtle text-info">132</span>
    </button>
    <button type="button" class="list-group-item list-group-item-action">
    All the Lorem Ipsum generators
    <span class="badge float-end bg-success-subtle text-success">2525</span>
    </button>
    <button type="button" class="list-group-item list-group-item-action" disabled>
    A disabled item meant to be disabled
    <span class="badge float-end bg-danger-subtle text-danger">21</span>
    </button>
    </div>

##### List with Numbered

Use `list-group-numbered` class (optionally use an `<ol>` element) to show numbered list group items.

1. Prepare the project timeline
2. Conduct a market analysis
3. Draft the initial design concepts
4. Gather feedback from stakeholders
5. Finalize the project plan

    <ol class="list-group list-group-numbered">
        <li class="list-group-item">Prepare the project timeline</li>
        <li class="list-group-item">Conduct a market analysis</li>
        <li class="list-group-item">Draft the initial design concepts</li>
        <li class="list-group-item">Gather feedback from stakeholders</li>
        <li class="list-group-item">Finalize the project plan</li>
    </ol>

##### Flush List

Use `list-group-flush` class to remove some borders and rounded corners to render list group items.

- JD
  John Doe
- JS
  Jane Smith
- EJ
  Emily Johnson
- MB
  Michael Brown
- SD
  Sarah Davis

    <ul class="list-group fs-13 fw-medium list-group-flush">
        <li class="list-group-item">
            <div class="d-flex align-items-center gap-2">
                <div class="avatar-item avatar avatar-title text-primary bg-primary-subtle">
                    JD
                </div>
                John Doe
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center gap-2">
                <div class="avatar-item avatar avatar-title text-secondary bg-secondary-subtle">
                    JS
                </div>
                Jane Smith
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center gap-2">
                <div class="avatar-item avatar avatar-title text-info bg-info-subtle">
                    EJ
                </div>
                Emily Johnson
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center gap-2">
                <div class="avatar-item avatar avatar-title text-danger bg-danger-subtle">
                    MB
                </div>
                Michael Brown
            </div>
        </li>
        <li class="list-group-item">
            <div class="d-flex align-items-center gap-2">
                <div class="avatar-item avatar avatar-title text-warning bg-warning-subtle">
                    SD
                </div>
                Sarah Davis
            </div>
        </li>
    </ul>

##### Borderless List

Use `list-borderless` class to `list-group-item` to remove border and create a normal list.

- First item description
- Second item description
- Third item description
- Fourth item description
- Fifth item description

    <ul class="list-group list-borderless">
        <li class="list-group-item"> <span class="bullet me-2"></span>First item description</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Second item description</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Third item description</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Fourth item description</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Fifth item description</li>
    </ul>

##### Small Size List

Use `list-group-sm` class to `list-group-item` to create a small size list.

- Complete the project proposal
- Review the budget report
- Schedule the team meeting
- Prepare presentation slides
- Send out the meeting agenda

    <ul class="list-group list-group-sm list-borderless">
        <li class="list-group-item"> <span class="bullet me-2"></span>Complete the project proposal</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Review the budget report</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Schedule the team meeting</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Prepare presentation slides</li>
        <li class="list-group-item"> <span class="bullet me-2"></span>Send out the meeting agenda</li>
    </ul>

##### List with Badges

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

- Top Gaming Headsets of 2023 Published
- Ultra HD Sound System In Development
- Summer Music Festival Highlights Published
- Wireless Earbuds Giveaway Pending Approval
- Next-Gen Audio Accessories In Development

    <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Top Gaming Headsets of 2023
            <span class="badge bg-success-subtle text-success">Published</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Ultra HD Sound System
            <span class="badge bg-primary-subtle text-primary">In Development</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Summer Music Festival Highlights
            <span class="badge bg-success-subtle text-success">Published</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Wireless Earbuds Giveaway
            <span class="badge bg-warning-subtle text-warning">Pending Approval</span>
        </li>
        <li class="list-group-item d-flex justify-content-between align-items-center">
            Next-Gen Audio Accessories
            <span class="badge bg-primary-subtle text-primary">In Development</span>
        </li>
    </ul>

##### List with Checkbox

Use Bootstrap’s checkboxes within list group items and customize as needed.

- Responsive Design Templates
- Interactive Data Visualizations
- Customizable Dashboard Widgets
- Mobile App UI Kits
- User Experience Enhancements

    <ul class="list-group">
        <li class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" id="firstCheckbox">
            <label class="form-check-label" for="firstCheckbox">Responsive Design Templates</label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" id="secondCheckbox">
            <label class="form-check-label" for="secondCheckbox">Interactive Data Visualizations</label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" id="thirdCheckbox">
            <label class="form-check-label" for="thirdCheckbox">Customizable Dashboard Widgets</label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" id="forthCheckbox">
            <label class="form-check-label" for="forthCheckbox">Mobile App UI Kits</label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="checkbox" id="fifthCheckbox">
            <label class="form-check-label" for="fifthCheckbox">User Experience Enhancements</label>
        </li>
    </ul>

##### List with Radios

Use Bootstrap’s radios within list group items and customize as needed.

- Fresh Produce
- Home Decor
- Skincare Products
- Fiction Novels
- Smart Home Devices

    <ul class="list-group">
        <li class="list-group-item">
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="firstRadio" checked>
            <label class="form-check-label" for="firstRadio"> Fresh Produce </label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="secondRadio">
            <label class="form-check-label" for="secondRadio"> Home Decor </label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="thirdRadio">
            <label class="form-check-label" for="thirdRadio"> Skincare Products </label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="forthRadio">
            <label class="form-check-label" for="forthRadio"> Fiction Novels </label>
        </li>
        <li class="list-group-item">
            <input class="form-check-input me-1" type="radio" name="listGroupRadio" id="fifthRadio">
            <label class="form-check-label" for="fifthRadio"> Smart Home Devices </label>
        </li>
    </ul>

##### Contextual Classes

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

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

##### Sub headings

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

1. Quantum Computing Breakthroughs New algorithms are enhancing processing speeds significantly.

   320 Views

2. Renewable Energy Growth Solar and wind power installations reach record highs this year.

   180 Views

3. Cybersecurity Challenges Rising threats demand innovative security solutions.

   275 Views

4. Space Exploration Milestones Mars missions unveil new discoveries about the planet's geology.

   150 Views

    <ol class="list-group list-group-numbered">
        <li class="list-group-item d-sm-flex justify-content-between align-items-start">
            <p class="ms-2 me-auto mb-0 text-muted">
                <span class="fw-semibold fs-14">Quantum Computing Breakthroughs</span> New algorithms are enhancing processing speeds significantly.
            </p>
            <span class="badge bg-primary-subtle text-primary">320 Views</span>
        </li>
        <li class="list-group-item d-sm-flex justify-content-between align-items-start">
            <p class="ms-2 mb-0 me-auto text-muted">
                <span class="fw-semibold fs-14">Renewable Energy Growth</span> Solar and wind power installations reach record highs this year.
            </p>
            <span class="badge bg-secondary-subtle text-secondary">180 Views</span>
        </li>
        <li class="list-group-item d-sm-flex justify-content-between align-items-start">
            <p class="ms-2 mb-0 me-auto text-muted">
                <span class="fw-semibold fs-14">Cybersecurity Challenges</span> Rising threats demand innovative security solutions.
            </p>
            <span class="badge bg-success-subtle text-success">275 Views</span>
        </li>
        <li class="list-group-item d-sm-flex justify-content-between align-items-start">
            <p class="ms-2 mb-0 me-auto text-muted">
                <span class="fw-semibold fs-14">Space Exploration Milestones</span> Mars missions unveil new discoveries about the planet's geology.
            </p>
            <span class="badge bg-danger-subtle text-danger">150 Views</span>
        </li>
    </ol>

##### Horizontal List

Use `list-group-horizontal` class to change the layout of list group items from vertical to horizontal across all breakpoints.

- Inbox
- Work
- Shopping

- Inbox
- Work
- Shopping

- Inbox
- Work
- Shopping

    <ul class="list-group list-group-horizontal-md mb-3">
        <li class="list-group-item">Inbox</li>
        <li class="list-group-item">Work</li>
        <li class="list-group-item">Shopping</li>
    </ul>
    <ul class="list-group list-group-horizontal-md justify-content-center mb-3">
        <li class="list-group-item">Inbox</li>
        <li class="list-group-item">Work</li>
        <li class="list-group-item">Shopping</li>
    </ul>
    <ul class="list-group list-group-horizontal-md justify-content-end">
        <li class="list-group-item">Inbox</li>
        <li class="list-group-item">Work</li>
        <li class="list-group-item">Shopping</li>
    </ul>

##### Custom Content

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

- ###### Charlie Pritchard

  12 minutes ago

  Pending

- Charlie has just started a new project and is currently collecting feedback from the team. The initial responses have been positive, but some adjustments are still needed before the final review.

- ###### Dominic Charlton

  15 minutes ago

  Pending

- Dominic is finalizing the details of his proposal and needs to address a few client concerns before submission. He’s been working late to ensure everything is perfect.

- ###### Declan Long

  1 hour ago

  Rejected

- Declan's proposal was unfortunately rejected due to missing key details. He’s currently reviewing the feedback to improve and resubmit his proposal for reconsideration.

- ###### Angela Bernier

  5 days ago

  Successful

- Angela’s project has been a resounding success. Her innovative approach and attention to detail impressed the client, leading to a contract extension and positive feedback.

    <div class="row">
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item list-group-header d-flex align-items-center gap-3">
                    <div class="flex-grow-1">
                        <h6 class="mb--1">Charlie Pritchard</h6>
                        <p class="mb-0 text-muted">12 minutes ago</p>
                    </div>
                    <span class="badge bg-primary flex-shrink-0 rounded-pill status-badge">Pending</span>
                </li>
                <li class="list-group-item list-group-item-content">
                    <div class="d-flex align-items-center gap-3">
                        <img src="assets/images/avatar/avatar-1.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
                        <p class="mb-0 flex-grow-1 text-muted">Charlie has just started a new project and is currently collecting feedback from the team. The initial responses have been positive, but some adjustments are still needed before the final review.</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item list-group-header d-flex align-items-center gap-3">
                    <div class="flex-grow-1">
                        <h6 class="mb--1">Dominic Charlton</h6>
                        <p class="mb-0 text-muted">15 minutes ago</p>
                    </div>
                    <span class="badge bg-primary rounded-pill status-badge flex-shrink-0">Pending</span>
                </li>
                <li class="list-group-item list-group-item-content">
                    <div class="d-flex align-items-center gap-3">
                        <img src="assets/images/avatar/avatar-2.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
                        <p class="mb-0 flex-grow-1 text-muted">Dominic is finalizing the details of his proposal and needs to address a few client concerns before submission. He’s been working late to ensure everything is perfect.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item list-group-header d-flex align-items-center gap-3 bg-light">
                    <div class="flex-grow-1">
                        <h6 class="mb--1">Declan Long</h6>
                        <p class="mb-0 text-muted">1 hour ago</p>
                    </div>
                    <span class="badge bg-danger rounded-pill status-badge flex-shrink-0">Rejected</span>
                </li>
                <li class="list-group-item list-group-item-content">
                    <div class="d-flex align-items-center gap-3">
                        <img src="assets/images/avatar/avatar-3.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
                        <p class="mb-0 flex-grow-1 text-muted">Declan's proposal was unfortunately rejected due to missing key details. He’s currently reviewing the feedback to improve and resubmit his proposal for reconsideration.</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-6">
            <ul class="list-group">
                <li class="list-group-item list-group-header d-flex align-items-center gap-3 bg-light">
                    <div class="flex-grow-1">
                        <h6 class="mb--1">Angela Bernier</h6>
                        <p class="mb-0 text-muted">5 days ago</p>
                    </div>
                    <span class="badge bg-success rounded-pill status-badge flex-shrink-0">Successful</span>
                </li>
                <li class="list-group-item list-group-item-content">
                    <div class="d-flex align-items-center gap-3">
                        <img src="assets/images/avatar/avatar-4.jpg" alt="" class="avatar-lg rounded-circle flex-shrink-0">
                        <p class="mb-0 flex-grow-1 text-muted">Angela’s project has been a resounding success. Her innovative approach and attention to detail impressed the client, leading to a contract extension and positive feedback.</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

Theme Customization

###### Layout:

##### Vertical

##### Horizontal

##### Semi Box

###### Content Width:

##### Default

##### Box

###### Layout Direction:

##### LTR

##### RTL

###### Layout Mode:

##### Light

##### Dark

##### System

###### Sidebar Size:

##### Default

##### Medium

##### Icon

##### Icon hover

###### Sidebar Color:

##### Light

##### Dark