Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Responsive To Do Lists built with the latest Bootstrap 5. Various variants of design and functionality.
https://github.com/mdbootstrap/bootstrap-to-do-list

bootstrap bootstrap-5-template bootstrap-responsive bootstrap-table bootstrap-template bootstrap5 resposnsive table to-do-list

Last synced: 12 days ago
JSON representation

Responsive To Do Lists built with the latest Bootstrap 5. Various variants of design and functionality.

Host: GitHub
URL: https://github.com/mdbootstrap/bootstrap-to-do-list
Owner: mdbootstrap
License: other
Created: 2021-08-13T14:05:12.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2022-01-28T09:11:36.000Z (almost 3 years ago)
Last Synced: 2024-10-31T10:36:25.304Z (19 days ago)
Topics: bootstrap, bootstrap-5-template, bootstrap-responsive, bootstrap-table, bootstrap-template, bootstrap5, resposnsive, table, to-do-list
Language: JavaScript
Homepage: https://mdbootstrap.com/docs/standard/extended/to-do-list/
Size: 957 KB
Stars: 6
Watchers: 5
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: License.pdf

Awesome Lists containing this project

README

Responsive To Do Lists built with the latest Bootstrap 5. Various variants of design and functionality.

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

## Basic example

![Bootstrap 5 To Do Lists](https://mdbootstrap.com/img/Marketing/github/to-do-list/basic.png)

```html

My Todo-s

Add

Filter

All
Completed
Active
Has due date

Sort

Added date
Due date

Buy groceries for next week

28th Jun 2020

Renew car insurance

28th Jun 2020

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 - free 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

[Bootstrap To Do Lists #2:
![Bootstrap 5 To Do Lists](https://mdbootstrap.com/img/Marketing/github/to-do-list/section-2.png)](https://mdbootstrap.com/docs/standard/extended/to-do-list/#section-2)

[Bootstrap To Do Lists #3:
![Bootstrap 5 To Do Lists](https://mdbootstrap.com/img/Marketing/github/to-do-list/section-3.png)](https://mdbootstrap.com/docs/standard/extended/to-do-list/#section-3)

[Bootstrap To Do Lists #4:
![Bootstrap 5 To Do Lists](https://mdbootstrap.com/img/Marketing/github/to-do-list/section-4.png)](https://mdbootstrap.com/docs/standard/extended/to-do-list/#section-4)

[Bootstrap To Do Lists #5:
![Bootstrap 5 To Do Lists](https://mdbootstrap.com/img/Marketing/github/to-do-list/section-5.png)](https://mdbootstrap.com/docs/standard/extended/to-do-list/#section-5)

[Bootstrap To Do Lists #6:
![Bootstrap 5 To Do Lists](https://mdbootstrap.com/img/Marketing/github/to-do-list/section-6.png)](https://mdbootstrap.com/docs/standard/extended/to-do-list/#section-6)

[Bootstrap To Do Lists #7:
![Bootstrap 5 To Do Lists](https://mdbootstrap.com/img/Marketing/github/to-do-list/section-7.png)](https://mdbootstrap.com/docs/standard/extended/to-do-list/#section-7)

___

## More extended Bootstrap documentation