Create a To Do List using Bootstrap 5

Last Updated : 28 Apr, 2025

A To-Do List is a tool for organizing tasks, allowing users to list, prioritize, and manage their activities, ensuring efficiency and productivity in completing them. Here we will create a ToDo list using Bootstrap. We will create our layout or component using Bootstrap predefined utilities and components. We will add custom JavaScript for the behavior of the to-do list.

Preview:

gfg

Approach

We are creating an input field with the help of Bootsrap input-group.
Then we are creating a list-group that will add out to do list into it.
we are creating a submit button that will add the task into the list. we are writing our logic to add the task into list in the javascript.
On submiting the typed text into the input field the function will be called and it will add the task into the list that was created before by the use of bootstrap.
Also, it will add two buttons with the task, one button is for editing the task and another one is for deleting the task.
If user clicks the editing button it will unable to option to edit the task by calling a function and that editing button will change itno save button after editing the user can save that.
If the user clicks the delete button it will call the function and it will remove the task from the list.
as the project does not using any kind of storage so it will be disappear once the browser will reload.
We have shown three default task at the first so that user can make changes by using those task to check the working of the app.

CDN link:

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet">
</head>

<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">To Do List</h1>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-body">
                        <form id="todo-form">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control"
                                       id="todo-input" 
                                       placeholder="Add new task"
                                    required>
                                <button class="btn btn-primary" type="submit">
                                      Add
                                  </button>
                            </div>
                        </form>
                        <ul class="list-group" id="todo-list">
                            <!-- Tasks will be added here dynamically -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle (popper.js included) -->
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
    <script>
        // Function to add a new task
        function addTask(task) {
            const todoList = document.getElementById("todo-list");
            const li = document.createElement("li");
            li.className = "list-group-item d-flex justify-content-between align-items-center";
            li.innerHTML = `
        <span class="task-text">${task}</span>
        <input type="text" class="form-control edit-input" style="display: none;" value="${task}">
        <div class="btn-group">
          <button class="btn btn-danger btn-sm delete-btn">&#x2715;</button>
          <button class="btn btn-primary btn-sm edit-btn">&#9998;</button>
        </div>
      `;
            todoList.appendChild(li);
        }

        // Event listener for form submission
        document.getElementById("todo-form").addEventListener("submit",
            function (event) {
                event.preventDefault();
                const taskInput = document.getElementById("todo-input");
                const task = taskInput.value.trim();
                if (task !== "") {
                    addTask(task);
                    taskInput.value = "";
                }
            });

        // Event listener for delete button click
        document.getElementById("todo-list").addEventListener("click",
            function (event) {
                if (event.target.classList.contains("delete-btn")) {
                    event.target.parentElement.parentElement.remove();
                }
            });

        // Event listener for edit button click
        document.getElementById("todo-list").addEventListener("click", function (event) {
            if (event.target.classList.contains("edit-btn")) {
                const taskText = event.target.parentElement
                    .parentElement.querySelector(".task-text");
                const editInput = event.target.parentElement
                    .parentElement.querySelector(".edit-input");
                if (taskText.style.display !== "none") {
                    taskText.style.display = "none";
                    editInput.style.display = "block";
                    editInput.focus();
                    event.target.innerHTML = "&#10004;";
                } else {
                    taskText.textContent = editInput.value;
                    taskText.style.display = "inline";
                    editInput.style.display = "none";
                    event.target.innerHTML = "&#9998;";
                }
            }
        });

        // Add default tasks
        const defaultTasks = ["HTML", "CSS", "JS", "Bootstrap"];
        defaultTasks.forEach(task => addTask(task));
    </script>
</body>

</html>

Output:

gfg

Create a To Do List using Bootstrap 5

geekcoder2298

Improve

Article Tags :

Create a To Do List using Bootstrap 5

Preview:

Approach

CDN link:

Similar Reads

Thank You!

What kind of Experience do you want to share?