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
-
-
Buy groceries for next week
-
-
Renew car insurance
-
-
Sign up for online course
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
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.
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.
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
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>
);
}