To Do List

React Bootstrap 5 To Do List 

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

Show code

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

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

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

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

Task List Template

A colorful template for an extended bootstrap todo list with priority indicated by a label.

Check

Task List

Team Member Task Priority Actions
avatar 1 Alice Mayer Call Sam For payments
High priority
avatar 2 Kate Moss Make payment to Bluedart
Low priority
avatar 3 Danny McChain Office rent
Middle priority
avatar 4 Alexa Chung Office grocery shopping
High priority
avatar 4 Ben Smith Ask for Lunch to Clients
Low priority
Show code

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