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

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

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

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

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

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

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

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

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

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

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

                                                        
                                                          <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-weight-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-weight-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-weight-medium rounded-pill ms-auto">01</span>
                                                          </li>
                                                        </ul>
                                                        
                                                    

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

                                                        
                                                         <div class="row">
                                                          <div class="col-4">
                                                            <div class="list-group" id="list-tab" role="tablist">
                                                              <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
                                                              <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
                                                              <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
                                                              <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
                                                              <a class="list-group-item list-group-item-action" id="list-box-list" data-bs-toggle="list" href="#list-box" role="tab" aria-controls="box">Box</a>
                                                              <a class="list-group-item list-group-item-action" id="list-inbox-list" data-bs-toggle="list" href="#list-inbox" role="tab" aria-controls="inbox">Inbox</a>
                                                              <a class="list-group-item list-group-item-action" id="list-spam-list" data-bs-toggle="list" href="#list-spam" role="tab" aria-controls="spam">Spam</a>
                                                            </div>
                                                          </div>
                                                          <div class="col-8">
                                                            <div class="tab-content" id="nav-tabContent">
                                                              <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>

                                                                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                                              </div>
                                                              <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
                                                                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
                                                              </div>
                                                              <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
                                                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
                                                                    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                                              </div>
                                                              <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
                                                                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
                                                              </div>
                                                              <div class="tab-pane fade" id="list-box" role="tabpanel" aria-labelledby="list-box-list">
                                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>

                                                                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                                              </div>
                                                              <div class="tab-pane fade" id="list-inbox" role="tabpanel" aria-labelledby="list-inbox-list">
                                                                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
                                                              </div>
                                                              <div class="tab-pane fade" id="list-spam" role="tabpanel" aria-labelledby="list-spam-list">
                                                                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum</p>
                                                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type</p>
                                                              </div>
                                                            </div>
                                                          </div>
                                                        </div>
                                                        
                                                    

                                                        
                                                         <ul class="list-group">
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="checkbox" value="" id="list1">
                                                                  <label class="form-check-label" for="list1">
                                                                    Todo list 1
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="checkbox" value="" id="list2">
                                                                  <label class="form-check-label" for="list2">
                                                                    Todo list 2
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="checkbox" value="" id="list3">
                                                                  <label class="form-check-label" for="list3">
                                                                    Todo list 3
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="checkbox" value="" id="list4">
                                                                  <label class="form-check-label" for="list4">
                                                                    Todo list 4
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="checkbox" value="" id="list5">
                                                                  <label class="form-check-label" for="list5">
                                                                    Todo list 5
                                                                  </label>
                                                                </div>
                                                              </li>
                                                            </ul>
                                                        
                                                    

                                                        
                                                         <ul class="list-group">
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="radio-btns" value="" id="radio1">
                                                                  <label class="form-check-label" for="radio1">
                                                                    Todo list 1
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="radio-btns" value="" id="radio2">
                                                                  <label class="form-check-label" for="radio2">
                                                                    Todo list 2
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="radio-btns" value="" id="radio3">
                                                                  <label class="form-check-label" for="radio3">
                                                                    Todo list 3
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="radio-btns" value="" id="radio4">
                                                                  <label class="form-check-label" for="radio4">
                                                                    Todo list 4
                                                                  </label>
                                                                </div>
                                                              </li>
                                                              <li class="list-group-item">
                                                                <div class="form-check">
                                                                  <input class="form-check-input" type="radio" name="radio-btns" value="" id="radio5">
                                                                  <label class="form-check-label" for="radio5">
                                                                    Todo list 5
                                                                  </label>
                                                                </div>
                                                              </li>
                                                            </ul>