https://github.com/mdbootstrap/react-to-do-list

Responsive React To Do Lists built with the latest Bootstrap 5. Many tasklist templates, various variants of design and functionality. https://mdbootstrap.com/docs/react/extended/to-do-list
https://github.com/mdbootstrap/react-to-do-list

bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js react template todolist

Last synced: about 2 months ago
JSON representation

Responsive React To Do Lists built with the latest Bootstrap 5. Many tasklist templates, various variants of design and functionality. https://mdbootstrap.com/docs/react/extended/to-do-list

Host: GitHub
URL: https://github.com/mdbootstrap/react-to-do-list
Owner: mdbootstrap
License: other
Created: 2022-08-29T13:07:14.000Z (almost 4 years ago)
Default Branch: master
Last Pushed: 2022-08-31T10:01:31.000Z (almost 4 years ago)
Last Synced: 2025-02-02T02:26:55.117Z (over 1 year ago)
Topics: bootstrap, bootstrap-template, bootstrap-theme, bootstrap5, css, html, js, react, template, todolist
Language: JavaScript
Homepage:
Size: 271 KB
Stars: 0
Watchers: 5
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)

# MDB React 5

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

Check out [React To Do List Documentation](https://mdbootstrap.com/docs/react/extended/to-do-list) for detailed instructions & even more examples.

## Basic example
![Basic example](https://user-images.githubusercontent.com/108793661/187208809-230cc81e-61ba-4339-8bec-51304b3c322e.png)
```js
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 (

My Todo-s

Add

Filter

Sort

{" "}

Buy groceries for next week

28th Jun 2020

{" "}

Renew car insurance

28th Jun 2020

{" "}

28th Jun 2020

);
}
```

```css
#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;
}
```

## How to use?

1. Download MDB 5 - REACT UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples (click on the image to see a live demo)
### To Do List Example #2:
[![React To Do List #1](https://user-images.githubusercontent.com/108793661/187209113-30bee87c-0d4e-4714-9707-a8e13aa3832b.png)](https://mdbootstrap.com/docs/react/extended/to-do-list/#section-2)

### To Do List Example #3:
[![React To Do List #2](https://user-images.githubusercontent.com/108793661/187209301-486688d6-5cbc-437f-8652-9c03d7a4ce75.png)](https://mdbootstrap.com/docs/react/extended/to-do-list/#section-3)

### To Do List Example #4:
[![React To Do List #3](https://user-images.githubusercontent.com/108793661/187209414-6002f8cb-26b8-4865-a611-d76b81ef860e.png)](https://mdbootstrap.com/docs/react/extended/to-do-list/#section-4)

### To Do List Example #5:
[![React To Do List #4](https://user-images.githubusercontent.com/108793661/187209550-423d7690-ac10-425a-b2ab-5fb9528afcc7.png)](https://mdbootstrap.com/docs/react/extended/to-do-list/#section-5)

You can find other examples [here](https://mdbootstrap.com/docs/react/extended/to-do-list).

## More extended React documentation