List Group | Dasher - Responsive Bootstrap 5 Admin Dashboard

Example

Preview
Code

An item
A second item
A third item
A fourth item
And a fifth one

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

Active Item

Preview
Code

An active item
A second item
A third item
A fourth item
And a fifth one

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

List Flush

Preview
Code

An item
A second item
A third item
A fourth item
And a fifth one

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

A simple default list group item
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">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>

With Link

Preview
Code

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>