how to align a component at the bottom of the page

Question

below in App.js i am displaying a Todo app where Todo Component displays each Todo task and TodoForm is used display a input through which we can add task

import "./App.css";
import Todo from "./Components/Todo";
import React, { Component } from "react";
import TodoForm from "./Components/TodoForm";
export default class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [
        { id: 1, name: "First Todo", completed: true },
        { id: 2, name: "Second Todo", completed: false },
        { id: 3, name: "Third Todo", completed: false },
      ],
    };
  }

  addTodo = (todo) => {
    todo.id = this.state.todos.length + 1 || 0;
    let todoList = [...this.state.todos, todo];
    this.setState({ todos: todoList });
  };

  completeTodo = (id) => {
    let todoList = [...this.state.todos];
    const index = todoList.findIndex((todo) => todo.id === id);
    todoList[index].completed = !todoList[index].completed;
    this.setState({ todos: todoList });
  };

  deleteTodo = (id) => {
    console.log(id);
    let todoList = [...this.state.todos];
    const index = todoList.findIndex((todo) => todo.id === id);
    todoList.splice(index, 1);
    this.setState({ todos: todoList });
  };

  render() {
    return (
      <div className="App">
        <div className="developer">
          <span>Developer</span>
          <br />
          <p>Kishore Pantra</p>
        </div>
        <h1 className="header">Todo React Component</h1>
        <div className="todos">
          {this.state.todos.map((todo) => (
            <Todo
              key={todo.id}
              todo={todo}
              completeTodo={this.completeTodo}
              deleteTodo={this.deleteTodo}
            />
          ))}
        </div>
        <TodoForm addTodo={this.addTodo} />
      </div>
    );
  }
}

here in App.css i am providing the css required for App.js

body,
html {
  margin: 0;
  padding: 0px;
  box-sizing: border-box;
  background-color: skyblue;
  height: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
}

.header {
  color: white;
  text-align: center;
}

.todos {
  height: 400px;
  overflow: auto;
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
  background-color: yellowgreen;
}

.developer {
  background-color: gold;
  width: 150px;
  text-align: center;
  color: white;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: -10px;
}

Todo.js

import React, { Component } from "react";
import "./Todo.css";
export default class Todo extends Component {
  completeTodo = (id) => {
    this.props.completeTodo(id);
  };

  deleteTodo = (id) => {
    this.props.deleteTodo(id);
  };
  render() {
    return (
      <div className="todo">
        <p
          style={{
            textDecoration: this.props.todo.completed ? "line-through" : "",
          }}
        >
          {this.props.todo.name}
        </p>
        <div className="status">
          <button
            className="completed"
            onClick={() => this.completeTodo(this.props.todo.id)}
          >
            {this.props.todo.completed ? "Reinitialize Todo" : "Todo Completed"}
          </button>
          <button
            className="remove"
            onClick={() => this.deleteTodo(this.props.todo.id)}
          >
            X
          </button>
        </div>
      </div>
    );
  }
}

Todo.css

.todo {
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
}

.todo p {
  width: 89%;
}

.status button {
  margin: 2px;
  border-radius: 100px;
  outline: none;
  border: 1px solid grey;
}

.completed {
  background-color: rgb(6, 250, 38);
  color: white;
}

.remove {
  background-color: rgba(238, 15, 15, 0.884);
  color: white;
}

TodoForm.js

import React, { Component } from "react";
import "./TodoForm.css";
export class TodoForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todotext: "",
    };
  }

  addTodo = (e) => {
    e.preventDefault();
    this.props.addTodo({ name: this.state.todotext, completed: false });
    this.setState({ todotext: "" });
  };

  render() {
    return (
      <form className="todoform" onSubmit={this.addTodo}>
        <input
          type="text"
          value={this.state.todotext}
          onChange={(e) => this.setState({ todotext: e.target.value })}
          placeholder="Add your Todo here..."
        />
      </form>
    );
  }
}

export default TodoForm;

todoForm.css

.todoform {
  display: flex;
  justify-content: center;
}
.todoform input {
  outline: none;
  width: 98%;
  padding: 10px;
  margin: 10px;
  border: none;
  border-radius: 10px;
}

i want to align Todoform component at the bottom of the screen how can i align it.

Answer 1

To align TodoForm component to the bottom, You can use flexbox or grid. In this case, I used the grid because it is lighter (less code)

In App.css file on .App class selector You need to set this few properties.

.App {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

---

Before change =>

---

After change =>