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
-
-
Buy groceries for next week
-
-
Renew car insurance
-
-
Sign up for online course
<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-tooltip-init title="Set due date"><i
class="fas fa-calendar-alt fa-lg me-3"></i></a>
<div>
<button type="button" data-mdb-button-init data-mdb-ripple-init 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 data-mdb-select-init>
<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 data-mdb-select-init>
<option value="1">Added date</option>
<option value="2">Due date</option>
</select>
<a href="#!" style="color: #23af89;" data-mdb-tooltip-init 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-tooltip-init title="Edit todo"><i
class="fas fa-pencil-alt me-3"></i></a>
<a href="#!" class="text-danger" data-mdb-tooltip-init 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-tooltip-init 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-body-tertiary">
<p class="small mb-0">
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Edit todo"><i
class="fas fa-pencil-alt me-3"></i></a>
<a href="#!" class="text-danger" data-mdb-tooltip-init 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-tooltip-init 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-body-tertiary 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-tooltip-init 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-tooltip-init 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
<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 data-mdb-input-init 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" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Save</button>
</div>
<div class="col-12">
<button type="submit" data-mdb-button-init data-mdb-ripple-init 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" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger">Delete</button>
<button type="submit" data-mdb-button-init data-mdb-ripple-init 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" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger">Delete</button>
<button type="submit" data-mdb-button-init data-mdb-ripple-init 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" data-mdb-button-init data-mdb-ripple-init class="btn btn-danger">Delete</button>
<button type="submit" data-mdb-button-init data-mdb-ripple-init 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 data-mdb-input-init 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" data-mdb-button-init data-mdb-ripple-init 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-tab-init 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-tab-init 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-tab-init 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.
<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 data-mdb-input-init 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" data-mdb-button-init data-mdb-ripple-init 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-tooltip-init 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-tooltip-init 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-tooltip-init 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-tooltip-init 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-tooltip-init 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-tooltip-init 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.
<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-tooltip-init title="Done"><i
class="fas fa-check fa-lg text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check fa-lg text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check fa-lg text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check fa-lg text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check fa-lg text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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
<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-tooltip-init title="Done"><i
class="fas fa-check text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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-tooltip-init title="Done"><i
class="fas fa-check text-success me-3"></i></a>
<a href="#!" data-mdb-tooltip-init 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 data-mdb-button-init class="me-2 btn btn-link">Cancel</button>
<button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Add Task</button>
</div>
</div>
</div>
</div>
</div>
</section>