To Do List

Bootstrap 5 To Do List component

Responsive To Do Lists built with the latest Bootstrap 5. Many tasklist templates, various variants of design and functionality.

Basic example

An template for a Bootstrap 5 todo list design, using checkboxes learn how to integrate it with datepicker and filters.

My Todo-s


Filter

Sort

        
            
          <section class="vh-100">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col">
                  <div class="card" id="list1" style="border-radius: .75rem; background-color: #eff1f2;">
                    <div class="card-body py-4 px-4 px-md-5">

                      <p class="h1 text-center mt-3 mb-4 pb-3 text-primary">
                        <i class="fas fa-check-square me-1"></i>
                        <u>My Todo-s</u>
                      </p>

                      <div class="pb-2">
                        <div class="card">
                          <div class="card-body">
                            <div class="d-flex flex-row align-items-center">
                              <input type="text" class="form-control form-control-lg" id="exampleFormControlInput1"
                                placeholder="Add new...">
                              <a href="#!" data-mdb-toggle="tooltip" title="Set due date"><i
                                  class="fas fa-calendar-alt fa-lg me-3"></i></a>
                              <div>
                                <button type="button" class="btn btn-primary">Add</button>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <hr class="my-4">

                      <div class="d-flex justify-content-end align-items-center mb-4 pt-2 pb-3">
                        <p class="small mb-0 me-2 text-muted">Filter</p>
                        <select class="select">
                          <option value="1">All</option>
                          <option value="2">Completed</option>
                          <option value="3">Active</option>
                          <option value="4">Has due date</option>
                        </select>
                        <p class="small mb-0 ms-4 me-2 text-muted">Sort</p>
                        <select class="select">
                          <option value="1">Added date</option>
                          <option value="2">Due date</option>
                        </select>
                        <a href="#!" style="color: #23af89;" data-mdb-toggle="tooltip" title="Ascending"><i
                            class="fas fa-sort-amount-down-alt ms-2"></i></a>
                      </div>

                      <ul class="list-group list-group-horizontal rounded-0 bg-transparent">
                        <li
                          class="list-group-item d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
                          <div class="form-check">
                            <input class="form-check-input me-0" type="checkbox" value="" id="flexCheckChecked1"
                              aria-label="..." checked />
                          </div>
                        </li>
                        <li
                          class="list-group-item px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
                          <p class="lead fw-normal mb-0">Buy groceries for next week</p>
                        </li>
                        <li class="list-group-item ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
                          <div class="d-flex flex-row justify-content-end mb-1">
                            <a href="#!" class="text-info" data-mdb-toggle="tooltip" title="Edit todo"><i
                                class="fas fa-pencil-alt me-3"></i></a>
                            <a href="#!" class="text-danger" data-mdb-toggle="tooltip" title="Delete todo"><i
                                class="fas fa-trash-alt"></i></a>
                          </div>
                          <div class="text-end text-muted">
                            <a href="#!" class="text-muted" data-mdb-toggle="tooltip" title="Created date">
                              <p class="small mb-0"><i class="fas fa-info-circle me-2"></i>28th Jun 2020</p>
                            </a>
                          </div>
                        </li>
                      </ul>
                      <ul class="list-group list-group-horizontal rounded-0">
                        <li
                          class="list-group-item d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
                          <div class="form-check">
                            <input class="form-check-input me-0" type="checkbox" value="" id="flexCheckChecked2"
                              aria-label="..." />
                          </div>
                        </li>
                        <li
                          class="list-group-item px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
                          <p class="lead fw-normal mb-0">Renew car insurance</p>
                        </li>
                        <li class="list-group-item px-3 py-1 d-flex align-items-center border-0 bg-transparent">
                          <div
                            class="py-2 px-3 me-2 border border-warning rounded-3 d-flex align-items-center bg-light">
                            <p class="small mb-0">
                              <a href="#!" data-mdb-toggle="tooltip" title="Due on date">
                                <i class="fas fa-hourglass-half me-2 text-warning"></i>
                              </a>
                              28th Jun 2020
                            </p>
                          </div>
                        </li>
                        <li class="list-group-item ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
                          <div class="d-flex flex-row justify-content-end mb-1">
                            <a href="#!" class="text-info" data-mdb-toggle="tooltip" title="Edit todo"><i
                                class="fas fa-pencil-alt me-3"></i></a>
                            <a href="#!" class="text-danger" data-mdb-toggle="tooltip" title="Delete todo"><i
                                class="fas fa-trash-alt"></i></a>
                          </div>
                          <div class="text-end text-muted">
                            <a href="#!" class="text-muted" data-mdb-toggle="tooltip" title="Created date">
                              <p class="small mb-0"><i class="fas fa-info-circle me-2"></i>28th Jun 2020</p>
                            </a>
                          </div>
                        </li>
                      </ul>
                      <ul class="list-group list-group-horizontal rounded-0 mb-2">
                        <li
                          class="list-group-item d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
                          <div class="form-check">
                            <input class="form-check-input me-0" type="checkbox" value="" id="flexCheckChecked3"
                              aria-label="..." />
                          </div>
                        </li>
                        <li
                          class="list-group-item px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
                          <p class="lead fw-normal mb-0 bg-light w-100 ms-n2 ps-2 py-1 rounded">Sign up for online
                            course</p>
                        </li>
                        <li class="list-group-item ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
                          <div class="d-flex flex-row justify-content-end mb-1">
                            <a href="#!" class="text-danger" data-mdb-toggle="tooltip" title="Delete todo"><i
                                class="fas fa-trash-alt"></i></a>
                          </div>
                          <div class="text-end text-muted">
                            <a href="#!" class="text-muted" data-mdb-toggle="tooltip" title="Created date">
                              <p class="small mb-0"><i class="fas fa-info-circle me-2"></i>28th Jun 2020</p>
                            </a>
                          </div>
                        </li>
                      </ul>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          #list1 .form-control {
            border-color: transparent;
          }
          #list1 .form-control:focus {
            border-color: transparent;
            box-shadow: none;
          }
          #list1 .select-input.form-control[readonly]:not([disabled]) {
            background-color: #fbfbfb;
          }          
          
        
    

To Do List Example #2

A simple ToDo checklist card with the avatars of user profiles with which the list has been shared.

Team Meeting checklist

04/01/2020 • ML - 1321

  • Task list and assignments
  • Set due date and assignments
  • Remove duplicate tasks and stories
  • Update the userflow and stories
  • Adjust the components

Shared with

  • avatar
  • avatar
  • avatar
  • avatar
        
            
          <section class="vh-100" style="background-color: #3da2c3;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col col-lg-8 col-xl-6">
                  <div class="card rounded-3">
                    <div class="card-body p-4">

                      <p class="mb-2"><span class="h2 me-2">Team Meeting</span> <span
                          class="badge bg-danger">checklist</span></p>
                      <p class="text-muted pb-2">04/01/2020 • ML - 1321</p>

                      <ul class="list-group rounded-0">
                        <li class="list-group-item border-0 d-flex align-items-center ps-0">
                          <input class="form-check-input me-3" type="checkbox" value="" aria-label="..." checked />
                          <s>Task list and assignments</s>
                        </li>
                        <li class="list-group-item border-0 d-flex align-items-center ps-0">
                          <input class="form-check-input me-3" type="checkbox" value="" aria-label="..." />
                          Set due date and assignments
                        </li>
                        <li class="list-group-item border-0 d-flex align-items-center ps-0">
                          <input class="form-check-input me-3" type="checkbox" value="" aria-label="..." />
                          Remove duplicate tasks and stories
                        </li>
                        <li class="list-group-item border-0 d-flex align-items-center ps-0">
                          <input class="form-check-input me-3" type="checkbox" value="" aria-label="..." />
                          Update the userflow and stories
                        </li>
                        <li class="list-group-item border-0 d-flex align-items-center ps-0">
                          <input class="form-check-input me-3" type="checkbox" value="" aria-label="..." />
                          Adjust the components
                        </li>
                      </ul>

                      <div class="divider d-flex align-items-center my-4">
                        <p class="text-center mx-3 mb-0" style="color: #a2aab7;">Shared with</p>
                      </div>

                      <ul class="list-group rounded-0 list-group-horizontal justify-content-center pb-2">
                        <li class="list-group-item border-0 d-flex align-items-center p-0">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp" alt="avatar"
                            class="rounded-circle me-n2" width="45">
                        </li>
                        <li class="list-group-item border-0 d-flex align-items-center p-0">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp" alt="avatar"
                            class="rounded-circle me-n2" width="45">
                        </li>
                        <li class="list-group-item border-0 d-flex align-items-center p-0">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar"
                            class="rounded-circle me-n2" width="45">
                        </li>
                        <li class="list-group-item border-0 d-flex align-items-center p-0">
                          <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar"
                            class="rounded-circle me-n2" width="45">
                        </li>
                      </ul>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .divider:after,
          .divider:before {
            content: "";
            flex: 1;
            height: 1px;
            background: #eee;
          }          
          
        
    

To Do List Example #3

A simple todo list with delete and complete action buttons.

To Do App

No. Todo item Status Actions
1 Buy groceries for next week In progress
2 Renew car insurance In progress
3 Sign up for online course In progress
        
            
          <section class="vh-100" style="background-color: #eee;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col col-lg-9 col-xl-7">
                  <div class="card rounded-3">
                    <div class="card-body p-4">

                      <h4 class="text-center my-3 pb-3">To Do App</h4>

                      <form class="row row-cols-lg-auto g-3 justify-content-center align-items-center mb-4 pb-2">
                        <div class="col-12">
                          <div class="form-outline">
                            <input type="text" id="form1" class="form-control" />
                            <label class="form-label" for="form1">Enter a task here</label>
                          </div>
                        </div>

                        <div class="col-12">
                          <button type="submit" class="btn btn-primary">Save</button>
                        </div>

                        <div class="col-12">
                          <button type="submit" class="btn btn-warning">Get tasks</button>
                        </div>
                      </form>

                      <table class="table mb-4">
                        <thead>
                          <tr>
                            <th scope="col">No.</th>
                            <th scope="col">Todo item</th>
                            <th scope="col">Status</th>
                            <th scope="col">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th scope="row">1</th>
                            <td>Buy groceries for next week</td>
                            <td>In progress</td>
                            <td>
                              <button type="submit" class="btn btn-danger">Delete</button>
                              <button type="submit" class="btn btn-success ms-1">Finished</button>
                            </td>
                          </tr>
                          <tr>
                            <th scope="row">2</th>
                            <td>Renew car insurance</td>
                            <td>In progress</td>
                            <td>
                              <button type="submit" class="btn btn-danger">Delete</button>
                              <button type="submit" class="btn btn-success ms-1">Finished</button>
                            </td>
                          </tr>
                          <tr>
                            <th scope="row">3</th>
                            <td>Sign up for online course</td>
                            <td>In progress</td>
                            <td>
                              <button type="submit" class="btn btn-danger">Delete</button>
                              <button type="submit" class="btn btn-success ms-1">Finished</button>
                            </td>
                          </tr>
                        </tbody>
                      </table>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
        
    

To Do List Example #4

A template of a ToDo list card with ALL, ACTIVE and COMPLETED tasks tabs - for organizing your tasklist.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Cras justo odio
  • Dapibus ac facilisis in
        
            
          <section class="vh-100 gradient-custom">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col col-xl-10">

                  <div class="card">
                    <div class="card-body p-5">

                      <form class="d-flex justify-content-center align-items-center mb-4">
                        <div class="form-outline flex-fill">
                          <input type="text" id="form2" class="form-control" />
                          <label class="form-label" for="form2">New task...</label>
                        </div>
                        <button type="submit" class="btn btn-info ms-2">Add</button>
                      </form>

                      <!-- Tabs navs -->
                      <ul class="nav nav-tabs mb-4 pb-2" id="ex1" role="tablist">
                        <li class="nav-item" role="presentation">
                          <a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1" role="tab"
                            aria-controls="ex1-tabs-1" aria-selected="true">All</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2" role="tab"
                            aria-controls="ex1-tabs-2" aria-selected="false">Active</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="ex1-tab-3" data-mdb-toggle="tab" href="#ex1-tabs-3" role="tab"
                            aria-controls="ex1-tabs-3" aria-selected="false">Completed</a>
                        </li>
                      </ul>
                      <!-- Tabs navs -->

                      <!-- Tabs content -->
                      <div class="tab-content" id="ex1-content">
                        <div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel"
                          aria-labelledby="ex1-tab-1">
                          <ul class="list-group mb-0">
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                              <s>Cras justo odio</s>
                            </li>
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                              <s>Dapibus ac facilisis in</s>
                            </li>
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                              Morbi leo risus
                            </li>
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                              Porta ac consectetur ac
                            </li>
                            <li class="list-group-item d-flex align-items-center border-0 mb-0 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                              Vestibulum at eros
                            </li>
                          </ul>
                        </div>
                        <div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
                          <ul class="list-group mb-0">
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                              Morbi leo risus
                            </li>
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                              Porta ac consectetur ac
                            </li>
                            <li class="list-group-item d-flex align-items-center border-0 mb-0 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                              Vestibulum at eros
                            </li>
                          </ul>
                        </div>
                        <div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
                          <ul class="list-group mb-0">
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                              <s>Cras justo odio</s>
                            </li>
                            <li class="list-group-item d-flex align-items-center border-0 mb-2 rounded"
                              style="background-color: #f4f6f7;">
                              <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                              <s>Dapibus ac facilisis in</s>
                            </li>
                          </ul>
                        </div>
                      </div>
                      <!-- Tabs content -->

                    </div>
                  </div>

                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .gradient-custom {
            background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%),
              linear-gradient(121.28deg, #669600 0%, #ff0000 100%),
              linear-gradient(360deg, #0029ff 0%, #8fff00 100%),
              radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%),
              radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
            background-blend-mode: screen, color-dodge, overlay, difference, normal;
          }          
          
        
    

To Do List Example #5

A simplistic ToDo list card with a textarea input for adding your tasks.

Awesome Todo List
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
  • Morbi leo risus
        
            
          <section class="vh-100" style="background-color: #e2d5de;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col col-xl-10">

                  <div class="card" style="border-radius: 15px;">
                    <div class="card-body p-5">

                      <h6 class="mb-3">Awesome Todo List</h6>

                      <form class="d-flex justify-content-center align-items-center mb-4">
                        <div class="form-outline flex-fill">
                          <input type="text" id="form3" class="form-control form-control-lg" />
                          <label class="form-label" for="form3">What do you need to do today?</label>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg ms-2">Add</button>
                      </form>

                      <ul class="list-group mb-0">
                        <li
                          class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                          <div class="d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                            Cras justo odio
                          </div>
                          <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                            <i class="fas fa-times text-primary"></i>
                          </a>
                        </li>
                        <li
                          class="list-group-item d-flex d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                          <div class="d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                            <s>Dapibus ac facilisis in</s>
                          </div>
                          <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                            <i class="fas fa-times text-primary"></i>
                          </a>
                        </li>
                        <li
                          class="list-group-item d-flex d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                          <div class="d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                            Morbi leo risus
                          </div>
                          <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                            <i class="fas fa-times text-primary"></i>
                          </a>
                        </li>
                        <li
                          class="list-group-item d-flex d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                          <div class="d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                            Porta ac consectetur ac
                          </div>
                          <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                            <i class="fas fa-times text-primary"></i>
                          </a>
                        </li>
                        <li
                          class="list-group-item d-flex d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-0">
                          <div class="d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
                            Vestibulum at eros
                          </div>
                          <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                            <i class="fas fa-times text-primary"></i>
                          </a>
                        </li>
                        <li
                          class="list-group-item d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                          <div class="d-flex align-items-center">
                            <input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
                            Morbi leo risus
                          </div>
                          <a href="#!" data-mdb-toggle="tooltip" title="Remove item">
                            <i class="fas fa-times text-primary"></i>
                          </a>
                        </li>
                      </ul>

                    </div>
                  </div>

                </div>
              </div>
            </div>
          </section>
          
        
    

Task List Template

A colorful template for an extended bootstrap todo list with priority indicated by a label, created with the help of our table generator.

Check

Task List

Team Member Task Priority Actions
avatar 1 Alice Mayer Call Sam For payments
High priority
avatar 1 Kate Moss Make payment to Bluedart
Low priority
avatar 1 Danny McChain Office rent
Middle priority
avatar 1 Alexa Chung Office grocery shopping
High priority
avatar 1 Ben Smith Ask for Lunch to Clients
Low priority
        
            
          <section class="vh-100 gradient-custom-2">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-md-12 col-xl-10">

                  <div class="card mask-custom">
                    <div class="card-body p-4 text-white">

                      <div class="text-center pt-3 pb-2">
                        <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-todo-list/check1.webp"
                          alt="Check" width="60">
                        <h2 class="my-4">Task List</h2>
                      </div>

                      <table class="table text-white mb-0">
                        <thead>
                          <tr>
                            <th scope="col">Team Member</th>
                            <th scope="col">Task</th>
                            <th scope="col">Priority</th>
                            <th scope="col">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp"
                                alt="avatar 1" style="width: 45px; height: auto;">
                              <span class="ms-2">Alice Mayer</span>
                            </th>
                            <td class="align-middle">
                              <span>Call Sam For payments</span>
                            </td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-danger">High priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check fa-lg text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt fa-lg text-warning"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                                alt="avatar 1" style="width: 45px; height: auto;">
                              <span class="ms-2">Kate Moss</span>
                            </th>
                            <td class="align-middle">Make payment to Bluedart</td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-success">Low priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check fa-lg text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt fa-lg text-warning"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                                alt="avatar 1" style="width: 45px; height: auto;">
                              <span class="ms-2">Danny McChain</span>
                            </th>
                            <td class="align-middle">Office rent</td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-warning">Middle priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check fa-lg text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt fa-lg text-warning"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                                alt="avatar 1" style="width: 45px; height: auto;">
                              <span class="ms-2">Alexa Chung</span>
                            </th>
                            <td class="align-middle">Office grocery shopping</td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-danger">High priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check fa-lg text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt fa-lg text-warning"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th class="border-0">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                                alt="avatar 1" style="width: 45px; height: auto;">
                              <span class="ms-2">Ben Smith</span>
                            </th>
                            <td class="border-0 align-middle">Ask for Lunch to Clients</td>
                            <td class="border-0 align-middle">
                              <h6 class="mb-0"><span class="badge bg-success">Low priority</span></h6>
                            </td>
                            <td class="border-0 align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check fa-lg text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt fa-lg text-warning"></i></a>
                            </td>
                          </tr>
                        </tbody>
                      </table>


                    </div>
                  </div>

                </div>
              </div>
            </div>
          </section>
          
        
    
        
            
          .gradient-custom-2 {
            /* fallback for old browsers */
            background: #7e40f6;
          
            /* Chrome 10-25, Safari 5.1-6 */
            background: -webkit-linear-gradient(
              to right,
              rgba(126, 64, 246, 1),
              rgba(80, 139, 252, 1)
            );
          
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            background: linear-gradient(
              to right,
              rgba(126, 64, 246, 1),
              rgba(80, 139, 252, 1)
            );
          }
          
          .mask-custom {
            background: rgba(24, 24, 16, 0.2);
            border-radius: 2em;
            backdrop-filter: blur(25px);
            border: 2px solid rgba(255, 255, 255, 0.05);
            background-clip: padding-box;
            box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
          }          
          
        
    

To Do List with Scroll

A simple tasklist based on a table with scrolling functionality.

Task List
Team Member Task Priority Actions
avatar 1 Alice Mayer Call Sam For payments
High priority
avatar 1 Kate Moss Make payment to Bluedart
Low priority
avatar 1 Danny McChain Office rent
Middle priority
avatar 1 Alexa Chung Office grocery shopping
High priority
avatar 1 Ben Smith Ask for Lunch to Clients
Low priority
avatar 1 Annie Hall Create weekly tasks plan
Medium priority
        
            
          <section class="vh-100" style="background-color: #eee;">
            <div class="container py-5 h-100">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-md-12 col-xl-10">

                  <div class="card">
                    <div class="card-header p-3">
                      <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>Task List</h5>
                    </div>
                    <div class="card-body" data-mdb-perfect-scrollbar="true" style="position: relative; height: 400px">

                      <table class="table mb-0">
                        <thead>
                          <tr>
                            <th scope="col">Team Member</th>
                            <th scope="col">Task</th>
                            <th scope="col">Priority</th>
                            <th scope="col">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp"
                                class="shadow-1-strong rounded-circle" alt="avatar 1"
                                style="width: 55px; height: auto;">
                              <span class="ms-2">Alice Mayer</span>
                            </th>
                            <td class="align-middle">
                              <span>Call Sam For payments</span>
                            </td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-danger">High priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt text-danger"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp"
                                class="shadow-1-strong rounded-circle" alt="avatar 1"
                                style="width: 55px; height: auto;">
                              <span class="ms-2">Kate Moss</span>
                            </th>
                            <td class="align-middle">Make payment to Bluedart</td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-success">Low priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt text-danger"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
                                class="shadow-1-strong rounded-circle" alt="avatar 1"
                                style="width: 55px; height: auto;">
                              <span class="ms-2">Danny McChain</span>
                            </th>
                            <td class="align-middle">Office rent</td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-warning">Middle priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt text-danger"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th>
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp"
                                class="shadow-1-strong rounded-circle" alt="avatar 1"
                                style="width: 55px; height: auto;">
                              <span class="ms-2">Alexa Chung</span>
                            </th>
                            <td class="align-middle">Office grocery shopping</td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-danger">High priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt text-danger"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th class="">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp"
                                class="shadow-1-strong rounded-circle" alt="avatar 1"
                                style="width: 55px; height: auto;">
                              <span class="ms-2">Ben Smith</span>
                            </th>
                            <td class="align-middle">Ask for Lunch to Clients</td>
                            <td class="align-middle">
                              <h6 class="mb-0"><span class="badge bg-success">Low priority</span></h6>
                            </td>
                            <td class="align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt text-danger"></i></a>
                            </td>
                          </tr>
                          <tr class="fw-normal">
                            <th class="border-0">
                              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp"
                                class="shadow-1-strong rounded-circle" alt="avatar 1"
                                style="width: 55px; height: auto;">
                              <span class="ms-2">Annie Hall</span>
                            </th>
                            <td class="border-0 align-middle">Create weekly tasks plan</td>
                            <td class="border-0 align-middle">
                              <h6 class="mb-0"><span class="badge bg-warning">Medium priority</span></h6>
                            </td>
                            <td class="border-0 align-middle">
                              <a href="#!" data-mdb-toggle="tooltip" title="Done"><i
                                  class="fas fa-check text-success me-3"></i></a>
                              <a href="#!" data-mdb-toggle="tooltip" title="Remove"><i
                                  class="fas fa-trash-alt text-warning"></i></a>
                            </td>
                          </tr>
                        </tbody>
                      </table>

                    </div>
                    <div class="card-footer text-end p-3">
                      <button class="me-2 btn btn-link">Cancel</button>
                      <button class="btn btn-primary">Add Task</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </section>