"Untitled"
Bootstrap 4.1.1 Snippet by shanvi

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <form method="post"> <div class="container-sm border border-dark"> <h2 class="text-center mb-4">Login</h2> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" name="username" placeholder="Enter username" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required> </div> <button type="submit" class="btn btn-primary btn-block">Login</button> <button type="submit" class="btn btn-danger btn-block">Logout</button> </div> </form> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #040D12; } /* Reduced width, Added padding for better spacing */ .container-sm { width: 550px; padding: 45px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1); } .btn-primary { background-color: #630a10; border-color: #630a10; } .btn-primary:hover { background-color: #911f27; border-color: #911f27; } .btn-danger { background-color: #fcf0c8; border-color: #fcf0c8; color: #911f27; } .btn-danger:hover { background-color: #face7f; border-color: #face7f; color: #630a10; }

Related: See More

Argon Dashboard PRO

Questions / Comments: