"Untitled"
Bootstrap 4.1.1 Snippet by Evanstechdev

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>Simple UI</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <h2>Login</h2> <input type="text" placeholder="Username"> <input type="password" placeholder="Password"> <button>Login</button> </div> </body> </html>
body { margin: 0; font-family: Arial, sans-serif; background: #f2f2f2; display: flex; justify-content: center; align-items: center; height: 100vh; } .card { background: white; padding: 30px; width: 250px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); text-align: center; } .card h2 { margin-bottom: 20px; } .card input { width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 5px; } .card button { width: 100%; padding: 10px; margin-top: 10px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } .card button:hover { background: #0056b3; }

Questions / Comments: