Reference
Lab
<!-- Type here enter --> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body style="background-color: green;"> <div class="container card-body mt-5"> <img src="pay_school/image/logo.png" alt="school" class="mx-auto d-block rounded-circle bg-white card" style="width: 10%;"> <form action="" method="post"> <div class="row"> <div class="col-md-12 col-lg-6 mx-auto p-5 mb-5 pb-5" style="background-color: whitesmoke;"> <h3 class="text-center text-success">Login</h3> <h3 class="text-center text-success">Students and Teachers</h3> <hr> <div class="form-floating mb-3"> <input type="text" class="form-control" placeholder="username" name="username" required> <label for="usernmae">Username</label> </div> <div class="form-floating mb-3"> <input type="password" class="form-control" placeholder="password" name="password" required> <label for="floatingInput">Password</label> </div> <div class="form-group"> <button type="submit" class="btn btn-success form-control" name="login">Login</button> <p>Students and Teacher Login<a href="index.php" class="text-danger"> Login</a> </p> </div> </div> </div> </form> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"> </script> </body> </html>