Xtreme Admin Template by WrapPixel

Basic List

                                                        
                                                           <ul class="list-group">
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                                  Todo List 1
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                                  Todo List 2
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                                  Todo List 3
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                                  Todo List 4
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                                  Todo List 5
                                                              </li>
                                                            </ul>

Todo List 1
Todo List 2
Todo List 3
Todo List 4
Todo List 5

Active List item

                                                        
                                                         <ul class="list-group">
                                                          <li class="list-group-item active" aria-current="true">
                                                              <i data-feather="box" class="feather-sm me-2"></i>
                                                              Todo List 1
                                                          </li>
                                                          <li class="list-group-item">
                                                              <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                              Todo List 2
                                                          </li>
                                                          <li class="list-group-item">
                                                              <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                              Todo List 3
                                                          </li>
                                                          <li class="list-group-item">
                                                              <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                              Todo List 4
                                                          </li>
                                                          <li class="list-group-item">
                                                              <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                              Todo List 5
                                                          </li>
                                                        </ul>

Todo List 1
Todo List 2
Todo List 3
Todo List 4
Todo List 5

Disabled List item

                                                        
                                                          <ul class="list-group">
                                                              <li class="list-group-item disabled" aria-disabled="true">
                                                                  <i data-feather="box" class="feather-sm me-2"></i>
                                                                  Todo List 1
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="feather-sm me-2"></i>
                                                                  Todo List 2
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="feather-sm me-2"></i>
                                                                  Todo List 3
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="feather-sm me-2"></i>
                                                                  Todo List 4
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="box" class="feather-sm me-2"></i>
                                                                  Todo List 5
                                                              </li>
                                                            </ul>

Todo List 1
Todo List 2
Todo List 3
Todo List 4
Todo List 5

List with links

                                                        
                                                          <div class="list-group">
                                                              <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
                                                                Cras justo odio
                                                              </a>
                                                              <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
                                                              <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
                                                              <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
                                                              <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
                                                            </div>

Inbox Starred Draft Trash Spam

List with buttons

                                                        
                                                          <div class="list-group">
                                                              <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
                                                                <i data-feather="inbox" class="feather-sm me-2"></i>
                                                                  Inbox
                                                              </button>
                                                              <button type="button" class="list-group-item list-group-item-action">
                                                                  <i data-feather="star" class="feather-sm me-2"></i>
                                                                  Starred
                                                              </button>
                                                              <button type="button" class="list-group-item list-group-item-action">
                                                                  <i data-feather="send" class="feather-sm me-2"></i>
                                                                  Draft
                                                              </button>
                                                              <button type="button" class="list-group-item list-group-item-action">
                                                                  <i data-feather="trash-2" class="feather-sm me-2"></i>
                                                                  Trash
                                                              </button>
                                                              <button type="button" class="list-group-item list-group-item-action" disabled>
                                                                  <i data-feather="slash" class="feather-sm me-2"></i>
                                                                  Spam
                                                              </button>
                                                            </div>

List with Flush

                                                        
                                                          <ul class="list-group list-group-flush">
                                                              <li class="list-group-item">
                                                                  <i data-feather="inbox" class="feather-sm me-2"></i>
                                                                  Inbox
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="star" class="feather-sm me-2"></i>
                                                                  Starred
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="send" class="feather-sm me-2"></i>
                                                                  Draft
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="trash-2" class="feather-sm me-2"></i>
                                                                  Trash
                                                              </li>
                                                              <li class="list-group-item">
                                                                  <i data-feather="slash" class="feather-sm me-2"></i>
                                                                  Spam
                                                              </li>
                                                            </ul>

Inbox
Starred
Draft
Trash
Spam

Horizontal list

                                                        
                                                          <ul class="list-group list-group-horizontal">
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 1
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 2
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 3
                                                              </li>
                                                            </ul>

Todo List 1
Todo List 2
Todo List 3

Horizontal list Up sm

                                                        
                                                          <ul class="list-group list-group-horizontal-sm">
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 1
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 2
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 3
                                                              </li>
                                                            </ul>

Todo List 1
Todo List 2
Todo List 3

Horizontal list Up md

                                                        
                                                          <ul class="list-group list-group-horizontal-md">
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 1
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 2
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 3
                                                              </li>
                                                            </ul>

Todo List 1
Todo List 2
Todo List 3

Horizontal list Up lg

                                                        
                                                          <ul class="list-group list-group-horizontal-lg">
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 1
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 2
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 3
                                                              </li>
                                                            </ul>

Todo List 1
Todo List 2
Todo List 3

Horizontal list Up xl

                                                        
                                                          <ul class="list-group list-group-horizontal-xl">
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 1
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 2
                                                              </li>
                                                              <li class="list-group-item d-flex align-items-center">
                                                                  <i data-feather="chrome" class="text-info feather-sm me-2"></i>
                                                                  Todo List 3
                                                              </li>
                                                            </ul>

Todo List 1
Todo List 2
Todo List 3

List with badges

                                                        
                                                          <ul class="list-group list-group-horizontal-xl">
                                                          <li class="list-group-item d-flex align-items-center">
                                                              <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                              Todo List 1
                                                              <span class="badge bg-light-info text-info font-medium rounded-pill ms-auto">14</span>
                                                          </li>
                                                          <li class="list-group-item d-flex align-items-center">
                                                              <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                              Todo List 2
                                                              <span class="badge bg-light-danger text-danger font-medium rounded-pill ms-auto">10</span>
                                                          </li>
                                                          <li class="list-group-item d-flex align-items-center">
                                                              <i data-feather="box" class="text-info feather-sm me-2"></i>
                                                              Todo List 3
                                                              <span class="badge bg-light-success text-success font-medium rounded-pill ms-auto">01</span>
                                                          </li>
                                                        </ul>

Todo List 1 14
Todo List 2 10
Todo List 3 01

Custom Content

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

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.