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

All

Sort

Added date
import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCheckbox,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow,
  MDBSelect,
  MDBTooltip,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <MDBContainer className="py-5">
      <MDBRow className="d-flex justify-content-center align-items-center h-100">
        <MDBCol>
          <MDBCard
            id="list1"
            style={{ borderRadius: ".75rem", backgroundColor: "#eff1f2" }}
          >
            <MDBCardBody className="py-4 px-4 px-md-5">
              <p className="h1 text-center mt-3 mb-4 pb-3 text-primary">
                <MDBIcon fas icon="check-square" className="me-1" />
                <u>My Todo-s</u>
              </p>
              <div className="pb-2">
                <MDBCard>
                  <MDBCardBody>
                    <div className="d-flex flex-row align-items-center">
                      <input
                        type="text"
                        className="form-control form-control-lg"
                        id="exampleFormControlInput1"
                        placeholder="Add new..."
                      />
                      <MDBTooltip
                        tag="a"
                        wrapperProps={{ href: "#!" }}
                        title="Set due date"
                      >
                        <MDBIcon
                          fas
                          icon="calendar-alt"
                          size="lg"
                          className="me-3"
                        />
                      </MDBTooltip>
                      <div>
                        <MDBBtn>Add</MDBBtn>
                      </div>
                    </div>
                  </MDBCardBody>
                </MDBCard>
              </div>
              <hr className="my-4" />

              <div className="d-flex justify-content-end align-items-center mb-4 pt-2 pb-3">
                <p className="small mb-0 me-2 text-muted">Filter</p>
                <MDBSelect
                  data={[
                    { text: "All", value: 1 },
                    { text: "Completed", value: 2 },
                    { text: "Active", value: 3 },
                    { text: "Has due date", value: 4 },
                  ]}
                />
                <p className="small mb-0 ms-4 me-2 text-muted">Sort</p>
                <MDBSelect
                  data={[
                    { text: "Added date", value: 1 },
                    { text: "Due date", value: 2 },
                  ]}
                />
                <MDBTooltip
                  tag="a"
                  wrapperProps={{ href: "#!" }}
                  title="Ascending"
                >
                  <MDBIcon
                    fas
                    icon="sort-amount-down-alt"
                    className="ms-2"
                    style={{ color: "#23af89" }}
                  />
                </MDBTooltip>
              </div>
              <MDBListGroup horizontal className="rounded-0 bg-transparent">
                <MDBListGroupItem className="d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
                  <MDBCheckbox
                    name="flexCheck"
                    value=""
                    id="flexCheckChecked"
                    defaultChecked
                  />
                </MDBListGroupItem>
                <MDBListGroupItem className="px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
                  {" "}
                  <p className="lead fw-normal mb-0">
                    Buy groceries for next week
                  </p>
                </MDBListGroupItem>
                <MDBListGroupItem className="ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
                  <div className="d-flex flex-row justify-content-end mb-1">
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Edit todo"
                    >
                      <MDBIcon
                        fas
                        icon="pencil-alt"
                        className="me-3"
                        color="info"
                      />
                    </MDBTooltip>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Delete todo"
                    >
                      <MDBIcon fas icon="trash-alt" color="danger" />
                    </MDBTooltip>
                  </div>
                  <div className="text-end text-muted">
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Created date"
                    >
                      <p className="small text-muted mb-0">
                        <MDBIcon fas icon="info-circle" className="me-2" />
                        28th Jun 2020
                      </p>
                    </MDBTooltip>
                  </div>
                </MDBListGroupItem>
              </MDBListGroup>
              <MDBListGroup horizontal className="rounded-0 bg-transparent">
                <MDBListGroupItem className="d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
                  <MDBCheckbox name="flexCheck" value="" id="flexCheck" />
                </MDBListGroupItem>
                <MDBListGroupItem className="px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
                  {" "}
                  <p className="lead fw-normal mb-0">Renew car insurance</p>
                </MDBListGroupItem>
                <MDBListGroupItem className="px-3 py-1 d-flex align-items-center border-0 bg-transparent">
                  <div className="py-2 px-3 me-2 border border-warning rounded-3 d-flex align-items-center bg-light">
                    <p className="small mb-0">
                      <MDBTooltip
                        tag="a"
                        wrapperProps={{ href: "#!" }}
                        title="Due on date"
                      >
                        <MDBIcon
                          fas
                          icon="hourglass-half"
                          color="warning"
                          className="me-2"
                        />
                      </MDBTooltip>
                      28th Jun 2020
                    </p>
                  </div>
                </MDBListGroupItem>
                <MDBListGroupItem className="ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
                  <div className="d-flex flex-row justify-content-end mb-1">
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Edit todo"
                    >
                      <MDBIcon
                        fas
                        icon="pencil-alt"
                        className="me-3"
                        color="info"
                      />
                    </MDBTooltip>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Delete todo"
                    >
                      <MDBIcon fas icon="trash-alt" color="danger" />
                    </MDBTooltip>
                  </div>
                  <div className="text-end text-muted">
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Created date"
                    >
                      <p className="small text-muted mb-0">
                        <MDBIcon fas icon="info-circle" className="me-2" />
                        28th Jun 2020
                      </p>
                    </MDBTooltip>
                  </div>
                </MDBListGroupItem>
              </MDBListGroup>
              <MDBListGroup horizontal className="rounded-0 bg-transparent">
                <MDBListGroupItem className="d-flex align-items-center ps-0 pe-3 py-1 rounded-0 border-0 bg-transparent">
                  <MDBCheckbox name="flexCheck" value="" id="flexCheck" />
                </MDBListGroupItem>
                <MDBListGroupItem className="px-3 py-1 d-flex align-items-center flex-grow-1 border-0 bg-transparent">
                  {" "}
                  <p className="lead fw-normal mb-0 bg-light w-100 ms-n2 ps-2 py-1 rounded">
                    Sign up for online course
                  </p>
                </MDBListGroupItem>
                <MDBListGroupItem className="ps-3 pe-0 py-1 rounded-0 border-0 bg-transparent">
                  <div className="d-flex flex-row justify-content-end mb-1">
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Delete todo"
                    >
                      <MDBIcon fas icon="trash-alt" color="danger" />
                    </MDBTooltip>
                  </div>
                  <div className="text-end text-muted">
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Created date"
                    >
                      <p className="small text-muted mb-0">
                        <MDBIcon fas icon="info-circle" className="me-2" />
                        28th Jun 2020
                      </p>
                    </MDBTooltip>
                  </div>
                </MDBListGroupItem>
              </MDBListGroup>
            </MDBCardBody>
          </MDBCard>
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  );
}
#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 
import React from "react";
import {
  MDBBadge,
  MDBCard,
  MDBCardBody,
  MDBCheckbox,
  MDBCol,
  MDBContainer,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <section className="p-5 vh-100" style={{ backgroundColor: "#3da2c3" }}>
      <MDBContainer className="py-5 h-100">
        <MDBRow className="d-flex justify-content-center align-items-center">
          <MDBCol lg="8" xl="6">
            <MDBCard className="rounded-3">
              <MDBCardBody className="p-4">
                <h5>
                  <span className="h2 me-2">Team Meeting</span>{" "}
                  <MDBBadge className="mx-2" color="danger">
                    checklist
                  </MDBBadge>
                </h5>
                <p className="text-muted pb-2">04/01/2020 • ML - 1321</p>
                <MDBListGroup className="rounded-0">
                  <MDBListGroupItem className="border-0 d-flex align-items-center ps-0">
                    <MDBCheckbox
                      name="flexCheck"
                      value=""
                      id="flexCheckChecked"
                      className="me-3"
                      defaultChecked
                    />
                    <s>Task list and assignments</s>
                  </MDBListGroupItem>
                  <MDBListGroupItem className="border-0 d-flex align-items-center ps-0">
                    <MDBCheckbox
                      name="flexCheck"
                      value=""
                      id="flexCheck"
                      className="me-3"
                    />
                    Set due date and assignments
                  </MDBListGroupItem>
                  <MDBListGroupItem className="border-0 d-flex align-items-center ps-0">
                    <MDBCheckbox
                      name="flexCheck"
                      value=""
                      id="flexCheck"
                      className="me-3"
                    />
                    Remove duplicate tasks and stories
                  </MDBListGroupItem>
                  <MDBListGroupItem className="border-0 d-flex align-items-center ps-0">
                    <MDBCheckbox
                      name="flexCheck"
                      value=""
                      id="flexCheck"
                      className="me-3"
                    />
                    Update the userflow and stories
                  </MDBListGroupItem>
                  <MDBListGroupItem className="border-0 d-flex align-items-center ps-0">
                    <MDBCheckbox
                      name="flexCheck"
                      value=""
                      id="flexCheck"
                      className="me-3"
                    />
                    Adjust the components
                  </MDBListGroupItem>
                </MDBListGroup>
                <div className="divider d-flex align-items-center my-4">
                  <p
                    className="text-center mx-3 mb-0"
                    style={{ color: "#a2aab7" }}
                  >
                    Shared with
                  </p>
                </div>
                <MDBListGroup
                  horizontal
                  className="rounded-0 justify-content-center pb-2"
                >
                  <MDBListGroupItem className="border-0 d-flex align-items-center p-0">
                    <img
                      src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp"
                      alt="avatar"
                      className="rounded-circle me-n2"
                      width="45"
                    />
                  </MDBListGroupItem>
                  <MDBListGroupItem className="border-0 d-flex align-items-center p-0">
                    <img
                      src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp"
                      alt="avatar"
                      className="rounded-circle me-n2"
                      width="45"
                    />
                  </MDBListGroupItem>
                  <MDBListGroupItem className="border-0 d-flex align-items-center p-0">
                    <img
                      src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp"
                      alt="avatar"
                      className="rounded-circle me-n2"
                      width="45"
                    />
                  </MDBListGroupItem>
                  <MDBListGroupItem className="border-0 d-flex align-items-center p-0">
                    <img
                      src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
                      alt="avatar"
                      className="rounded-circle me-n2"
                      width="45"
                    />
                  </MDBListGroupItem>
                </MDBListGroup>
              </MDBCardBody>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </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 
import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBInput,
  MDBRow,
  MDBTable,
  MDBTableBody,
  MDBTableHead,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <section className="vh-100" style={{ backgroundColor: "#eee" }}>
      <MDBContainer className="py-5 h-100">
        <MDBRow className="d-flex justify-content-center align-items-center">
          <MDBCol lg="9" xl="7">
            <MDBCard className="rounded-3">
              <MDBCardBody className="p-4">
                <h4 className="text-center my-3 pb-3">To Do App</h4>
                <MDBRow className="row-cols-lg-auto g-3 justify-content-center align-items-center mb-4 pb-2">
                  <MDBCol size="12">
                    <MDBInput
                      label="Enter a task here"
                      id="form1"
                      type="text"
                    />
                  </MDBCol>
                  <MDBCol size="12">
                    <MDBBtn type="submit">Save</MDBBtn>
                  </MDBCol>
                  <MDBCol size="12">
                    <MDBBtn type="submit" color="warning">
                      Get tasks
                    </MDBBtn>
                  </MDBCol>
                </MDBRow>
                <MDBTable className="mb-4">
                  <MDBTableHead>
                    <tr>
                      <th scope="col">No.</th>
                      <th scope="col">Todo item</th>
                      <th scope="col">Status</th>
                      <th scope="col">Actions</th>
                    </tr>
                  </MDBTableHead>
                  <MDBTableBody>
                    <tr>
                      <th scope="row">1</th>
                      <td>Buy groceries for next week</td>
                      <td>In progress</td>
                      <td>
                        <MDBBtn type="submit" color="danger">
                          Delete
                        </MDBBtn>

                        <MDBBtn type="submit" color="success" className="ms-1">
                          Finished
                        </MDBBtn>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">2</th>
                      <td>Renew car insurance</td>
                      <td>In progress</td>
                      <td>
                        <MDBBtn type="submit" color="danger">
                          Delete
                        </MDBBtn>

                        <MDBBtn type="submit" color="success" className="ms-1">
                          Finished
                        </MDBBtn>
                      </td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td>Sign up for online course</td>
                      <td>In progress</td>
                      <td>
                        <MDBBtn type="submit" color="danger">
                          Delete
                        </MDBBtn>

                        <MDBBtn type="submit" color="success" className="ms-1">
                          Finished
                        </MDBBtn>
                      </td>
                    </tr>
                  </MDBTableBody>
                </MDBTable>
              </MDBCardBody>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </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 
import React, { useState } from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCheckbox,
  MDBCol,
  MDBContainer,
  MDBInput,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow,
  MDBTabs,
  MDBTabsContent,
  MDBTabsItem,
  MDBTabsLink,
  MDBTabsPane,
} from "mdb-react-ui-kit";

export default function App() {
  const [active, setActive] = useState("tab1");

  const handleClick = (value) => {
    if (value === active) {
      return;
    }

    setActive(value);
  };

  return (
    <section className="gradient-custom vh-100">
      <MDBContainer className="py-5 h-100">
        <MDBRow className="d-flex justify-content-center align-items-center">
          <MDBCol xl="10">
            <MDBCard>
              <MDBCardBody className="p-5">
                <div className="d-flex justify-content-center align-items-center mb-4">
                  <MDBInput
                    type="text"
                    id="form1"
                    label="New task..."
                    wrapperClass="flex-fill"
                  />
                  <MDBBtn type="submit" color="info" className="ms-2">
                    Add
                  </MDBBtn>
                </div>
                <MDBTabs className="mb-4 pb-2">
                  <MDBTabsItem>
                    <MDBTabsLink
                      onClick={() => handleClick("tab1")}
                      active={active === "tab1"}
                    >
                      All
                    </MDBTabsLink>
                  </MDBTabsItem>
                  <MDBTabsItem>
                    <MDBTabsLink
                      onClick={() => handleClick("tab2")}
                      active={active === "tab2"}
                    >
                      Active
                    </MDBTabsLink>
                  </MDBTabsItem>
                  <MDBTabsItem>
                    <MDBTabsLink
                      onClick={() => handleClick("tab3")}
                      active={active === "tab3"}
                    >
                      Completed
                    </MDBTabsLink>
                  </MDBTabsItem>
                </MDBTabs>
                <MDBTabsContent>
                  <MDBTabsPane show={active === "tab1"}>
                    <MDBListGroup className="mb-0">
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                          defaultChecked
                        />
                        <s>Cras justo odio</s>
                      </MDBListGroupItem>
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                          defaultChecked
                        />
                        <s>Dapibus ac facilisis in</s>
                      </MDBListGroupItem>
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                        />
                        Morbi leo risus
                      </MDBListGroupItem>
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                        />
                        Porta ac consectetur ac
                      </MDBListGroupItem>
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                        />
                        Vestibulum at eros
                      </MDBListGroupItem>
                    </MDBListGroup>
                  </MDBTabsPane>
                  <MDBTabsPane show={active === "tab2"}>
                    <MDBListGroup className="mb-0">
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                        />
                        Morbi leo risus
                      </MDBListGroupItem>
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                        />
                        Porta ac consectetur ac
                      </MDBListGroupItem>
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                        />
                        Vestibulum at eros
                      </MDBListGroupItem>
                    </MDBListGroup>
                  </MDBTabsPane>
                  <MDBTabsPane show={active === "tab3"}>
                    <MDBListGroup className="mb-0">
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                          defaultChecked
                        />
                        <s>Cras justo odio</s>
                      </MDBListGroupItem>
                      <MDBListGroupItem
                        className=" d-flex align-items-center border-0 mb-2 rounded"
                        style={{ backgroundColor: "#f4f6f7" }}
                      >
                        {" "}
                        <MDBCheckbox
                          name="flexCheck"
                          value=""
                          id="flexCheck"
                          className="me-3"
                          defaultChecked
                        />
                        <s>Dapibus ac facilisis in</s>
                      </MDBListGroupItem>
                    </MDBListGroup>
                  </MDBTabsPane>
                </MDBTabsContent>
              </MDBCardBody>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </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 
import React from "react";
import {
  MDBBtn,
  MDBCard,
  MDBCardBody,
  MDBCheckbox,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBListGroup,
  MDBListGroupItem,
  MDBRow,
  MDBTextArea,
  MDBTooltip,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <section className="vh-100" style={{ backgroundColor: "#e2d5de" }}>
      <MDBContainer className="py-5 h-100">
        <MDBRow className="d-flex justify-content-center align-items-center">
          <MDBCol xl="10">
            <MDBCard style={{ borderRadius: "15px" }}>
              <MDBCardBody className="p-5">
                <h6 className="mb-3">Awesome Todo List</h6>
                <div className="d-flex justify-content-center align-items-center mb-4">
                  <MDBTextArea
                    label="What do you need to do today?"
                    id="textAreaExample"
                    rows={4}
                    wrapperClass="flex-fill"
                  />
                  <MDBBtn type="submit" size="lg" className="ms-2">
                    Add
                  </MDBBtn>
                </div>
                <MDBListGroup className="mb-0">
                  <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                    <div className="d-flex align-items-center">
                      <MDBCheckbox
                        name="flexCheck"
                        value=""
                        id="flexCheckChecked"
                        className="me-3"
                      />
                      Task list and assignments
                    </div>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Remove item"
                    >
                      <MDBIcon fas icon="times" color="primary" />
                    </MDBTooltip>
                  </MDBListGroupItem>
                  <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                    <div className="d-flex align-items-center">
                      <MDBCheckbox
                        name="flexCheck"
                        value=""
                        id="flexCheckChecked"
                        className="me-3"
                        defaultChecked
                      />
                      <s>Dapibus ac facilisis in</s>
                    </div>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Remove item"
                    >
                      <MDBIcon fas icon="times" color="primary" />
                    </MDBTooltip>
                  </MDBListGroupItem>
                  <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                    <div className="d-flex align-items-center">
                      <MDBCheckbox
                        name="flexCheck"
                        value=""
                        id="flexCheck"
                        className="me-3"
                      />
                      Morbi leo risus
                    </div>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Remove item"
                    >
                      <MDBIcon fas icon="times" color="primary" />
                    </MDBTooltip>
                  </MDBListGroupItem>
                  <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                    <div className="d-flex align-items-center">
                      <MDBCheckbox
                        name="flexCheck"
                        value=""
                        id="flexCheck"
                        className="me-3"
                      />
                      Porta ac consectetur ac
                    </div>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Remove item"
                    >
                      <MDBIcon fas icon="times" color="primary" />
                    </MDBTooltip>
                  </MDBListGroupItem>
                  <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                    <div className="d-flex align-items-center">
                      <MDBCheckbox
                        name="flexCheck"
                        value=""
                        id="flexCheckChecked"
                        className="me-3"
                        defaultChecked
                      />
                      Vestibulum at eros
                    </div>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Remove item"
                    >
                      <MDBIcon fas icon="times" color="primary" />
                    </MDBTooltip>
                  </MDBListGroupItem>
                  <MDBListGroupItem className="d-flex justify-content-between align-items-center border-start-0 border-top-0 border-end-0 border-bottom rounded-0 mb-2">
                    <div className="d-flex align-items-center">
                      <MDBCheckbox
                        name="flexCheck"
                        value=""
                        id="flexCheck"
                        className="me-3"
                      />
                      Morbi leo risus
                    </div>
                    <MDBTooltip
                      tag="a"
                      wrapperProps={{ href: "#!" }}
                      title="Remove item"
                    >
                      <MDBIcon fas icon="times" color="primary" />
                    </MDBTooltip>
                  </MDBListGroupItem>
                </MDBListGroup>
              </MDBCardBody>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </section>
  );
}

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
 
import React from "react";
import {
  MDBBadge,
  MDBCard,
  MDBCardBody,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBRow,
  MDBTable,
  MDBTableBody,
  MDBTableHead,
  MDBTooltip,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <section className="gradient-custom-2 vh-100">
      <MDBContainer className="py-5 h-100">
        <MDBRow className="d-flex justify-content-center align-items-center">
          <MDBCol md="12" xl="10">
            <MDBCard className="mask-custom">
              <MDBCardBody className="p-4 text-white">
                <div className="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 className="my-4">Task List</h2>
                </div>
                <MDBTable className="text-white mb-0">
                  <MDBTableHead>
                    <tr>
                      <th scope="col">Team Member</th>
                      <th scope="col">Task</th>
                      <th scope="col">Priority</th>
                      <th scope="col">Actions</th>
                    </tr>
                  </MDBTableHead>
                  <MDBTableBody>
                    <tr className="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 className="ms-2">Alice Mayer</span>
                      </th>
                      <td className="align-middle">
                        <span>Call Sam For payments</span>
                      </td>
                      <td className="align-middle">
                        <h6 className="mb-0">
                          <MDBBadge className="mx-2" color="danger">
                            High priority
                          </MDBBadge>
                        </h6>
                      </td>
                      <td className="align-middle">
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Done"
                        >
                          <MDBIcon
                            fas
                            icon="check"
                            color="success"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Remove"
                        >
                          <MDBIcon
                            fas
                            icon="trash-alt"
                            color="warning"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                      </td>
                    </tr>
                    <tr className="fw-normal">
                      <th>
                        <img
                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp"
                          alt="avatar 2"
                          style={{ width: "45px", height: "auto" }}
                        />
                        <span className="ms-2">Kate Moss</span>
                      </th>
                      <td className="align-middle">
                        <span>Make payment to Bluedart</span>
                      </td>
                      <td className="align-middle">
                        <h6 className="mb-0">
                          <MDBBadge className="mx-2" color="success">
                            Low priority
                          </MDBBadge>
                        </h6>
                      </td>
                      <td className="align-middle">
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Done"
                        >
                          <MDBIcon
                            fas
                            icon="check"
                            color="success"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Remove"
                        >
                          <MDBIcon
                            fas
                            icon="trash-alt"
                            color="warning"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                      </td>
                    </tr>
                    <tr className="fw-normal">
                      <th>
                        <img
                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava3-bg.webp"
                          alt="avatar 3"
                          style={{ width: "45px", height: "auto" }}
                        />
                        <span className="ms-2">Danny McChain</span>
                      </th>
                      <td className="align-middle">
                        <span>Office rent</span>
                      </td>
                      <td className="align-middle">
                        <h6 className="mb-0">
                          <MDBBadge className="mx-2" color="warning">
                            Middle priority
                          </MDBBadge>
                        </h6>
                      </td>
                      <td className="align-middle">
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Done"
                        >
                          <MDBIcon
                            fas
                            icon="check"
                            color="success"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Remove"
                        >
                          <MDBIcon
                            fas
                            icon="trash-alt"
                            color="warning"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                      </td>
                    </tr>
                    <tr className="fw-normal">
                      <th>
                        <img
                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava5-bg.webp"
                          alt="avatar 4"
                          style={{ width: "45px", height: "auto" }}
                        />
                        <span className="ms-2">Alexa Chung</span>
                      </th>
                      <td className="align-middle">
                        <span>Office grocery shopping</span>
                      </td>
                      <td className="align-middle">
                        <h6 className="mb-0">
                          <MDBBadge className="mx-2" color="danger">
                            High priority
                          </MDBBadge>
                        </h6>
                      </td>
                      <td className="align-middle">
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Done"
                        >
                          <MDBIcon
                            fas
                            icon="check"
                            color="success"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Remove"
                        >
                          <MDBIcon
                            fas
                            icon="trash-alt"
                            color="warning"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                      </td>
                    </tr>
                    <tr className="fw-normal">
                      <th className="border-0">
                        <img
                          src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava6-bg.webp"
                          alt="avatar 5"
                          style={{ width: "45px", height: "auto" }}
                        />
                        <span className="ms-2">Ben Smith</span>
                      </th>
                      <td className="border-0 align-middle">
                        <span>Ask for Lunch to Clients</span>
                      </td>
                      <td className="border-0 align-middle">
                        <h6 className="mb-0">
                          <MDBBadge className="mx-2" color="success">
                            Low priority
                          </MDBBadge>
                        </h6>
                      </td>
                      <td className="border-0 align-middle">
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Done"
                        >
                          <MDBIcon
                            fas
                            icon="check"
                            color="success"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                        <MDBTooltip
                          tag="a"
                          wrapperProps={{ href: "#!" }}
                          title="Remove"
                        >
                          <MDBIcon
                            fas
                            icon="trash-alt"
                            color="warning"
                            size="lg"
                            className="me-3"
                          />
                        </MDBTooltip>
                      </td>
                    </tr>
                  </MDBTableBody>
                </MDBTable>
              </MDBCardBody>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </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
 
import React from "react";
import {
  MDBBadge,
  MDBCard,
  MDBCardBody,
  MDBCardHeader,
  MDBCol,
  MDBContainer,
  MDBIcon,
  MDBRow,
  MDBScrollbar,
  MDBTable,
  MDBTableBody,
  MDBTableHead,
  MDBTooltip,
} from "mdb-react-ui-kit";

export default function App() {
  return (
    <section className="gradient-custom-2 vh-100">
      <MDBContainer className="py-5 h-100">
        <MDBRow className="d-flex justify-content-center align-items-center">
          <MDBCol md="12" xl="10">
            <MDBCard>
              <MDBCardHeader className="p-3">
                <h5 className="mb-0">
                  <MDBIcon fas icon="tasks" className="me-2" />
                  Task List
                </h5>
              </MDBCardHeader>
              <MDBScrollbar style={{ position: "relative", height: "400px" }}>
                <MDBCardBody>
                  <MDBTable className="mb-0">
                    <MDBTableHead>
                      <tr>
                        <th scope="col">Team Member</th>
                        <th scope="col">Task</th>
                        <th scope="col">Priority</th>
                        <th scope="col">Actions</th>
                      </tr>
                    </MDBTableHead>
                    <MDBTableBody>
                      <tr className="fw-normal">
                        <th>
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp"
                            alt="avatar"
                            className="shadow-1-strong rounded-circle"
                            style={{ width: "45px", height: "auto" }}
                          />
                          <span className="ms-2">Alice Mayer</span>
                        </th>
                        <td className="align-middle">
                          <span>Call Sam For payments</span>
                        </td>
                        <td className="align-middle">
                          <h6 className="mb-0">
                            <MDBBadge className="mx-2" color="danger">
                              High priority
                            </MDBBadge>
                          </h6>
                        </td>
                        <td className="align-middle">
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Done"
                          >
                            <MDBIcon
                              fas
                              icon="check"
                              color="success"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Remove"
                          >
                            <MDBIcon
                              fas
                              icon="trash-alt"
                              color="danger"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                        </td>
                      </tr>
                      <tr className="fw-normal">
                        <th>
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp"
                            alt="avatar"
                            className="shadow-1-strong rounded-circle"
                            style={{ width: "45px", height: "auto" }}
                          />
                          <span className="ms-2">Kate Moss</span>
                        </th>
                        <td className="align-middle">
                          <span>Make payment to Bluedart</span>
                        </td>
                        <td className="align-middle">
                          <h6 className="mb-0">
                            <MDBBadge className="mx-2" color="success">
                              Low priority
                            </MDBBadge>
                          </h6>
                        </td>
                        <td className="align-middle">
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Done"
                          >
                            <MDBIcon
                              fas
                              icon="check"
                              color="success"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Remove"
                          >
                            <MDBIcon
                              fas
                              icon="trash-alt"
                              color="danger"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                        </td>
                      </tr>
                      <tr className="fw-normal">
                        <th>
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
                            alt="avatar"
                            className="shadow-1-strong rounded-circle"
                            style={{ width: "45px", height: "auto" }}
                          />
                          <span className="ms-2">Danny McChain</span>
                        </th>
                        <td className="align-middle">
                          <span>Office rent</span>
                        </td>
                        <td className="align-middle">
                          <h6 className="mb-0">
                            <MDBBadge className="mx-2" color="warning">
                              Middle priority
                            </MDBBadge>
                          </h6>
                        </td>
                        <td className="align-middle">
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Done"
                          >
                            <MDBIcon
                              fas
                              icon="check"
                              color="success"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Remove"
                          >
                            <MDBIcon
                              fas
                              icon="trash-alt"
                              color="danger"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                        </td>
                      </tr>
                      <tr className="fw-normal">
                        <th>
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp"
                            alt="avatar"
                            className="shadow-1-strong rounded-circle"
                            style={{ width: "45px", height: "auto" }}
                          />
                          <span className="ms-2">Alexa Chung</span>
                        </th>
                        <td className="align-middle">
                          <span>Office grocery shopping</span>
                        </td>
                        <td className="align-middle">
                          <h6 className="mb-0">
                            <MDBBadge className="mx-2" color="danger">
                              High priority
                            </MDBBadge>
                          </h6>
                        </td>
                        <td className="align-middle">
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Done"
                          >
                            <MDBIcon
                              fas
                              icon="check"
                              color="success"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Remove"
                          >
                            <MDBIcon
                              fas
                              icon="trash-alt"
                              color="danger"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                        </td>
                      </tr>
                      <tr className="fw-normal">
                        <th className="border-0">
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp"
                            alt="avatar"
                            className="shadow-1-strong rounded-circle"
                            style={{ width: "45px", height: "auto" }}
                          />
                          <span className="ms-2">Ben Smith</span>
                        </th>
                        <td className="border-0 align-middle">
                          <span>Ask for Lunch to Clients</span>
                        </td>
                        <td className="border-0 align-middle">
                          <h6 className="mb-0">
                            <MDBBadge className="mx-2" color="success">
                              Low priority
                            </MDBBadge>
                          </h6>
                        </td>
                        <td className="border-0 align-middle">
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Done"
                          >
                            <MDBIcon
                              fas
                              icon="check"
                              color="success"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Remove"
                          >
                            <MDBIcon
                              fas
                              icon="trash-alt"
                              color="danger"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                        </td>
                      </tr>
                      <tr className="fw-normal">
                        <th className="border-0">
                          <img
                            src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp"
                            alt="avatar"
                            className="shadow-1-strong rounded-circle"
                            style={{ width: "45px", height: "auto" }}
                          />
                          <span className="ms-2">Annie Hall</span>
                        </th>
                        <td className="border-0 align-middle">
                          <span>Create weekly tasks plan</span>
                        </td>
                        <td className="border-0 align-middle">
                          <h6 className="mb-0">
                            <MDBBadge className="mx-2" color="warning">
                              Medium priority
                            </MDBBadge>
                          </h6>
                        </td>
                        <td className="border-0 align-middle">
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Done"
                          >
                            <MDBIcon
                              fas
                              icon="check"
                              color="success"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                          <MDBTooltip
                            tag="a"
                            wrapperProps={{ href: "#!" }}
                            title="Remove"
                          >
                            <MDBIcon
                              fas
                              icon="trash-alt"
                              color="danger"
                              size="lg"
                              className="me-3"
                            />
                          </MDBTooltip>
                        </td>
                      </tr>
                    </MDBTableBody>
                  </MDBTable>
                </MDBCardBody>
              </MDBScrollbar>
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    </section>
  );
}