"Sign In form"
Bootstrap 4.1.1 Snippet by TheBootstrapGuide

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 ----------> <!-- Bootstrap 4.1.1 CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome 5 for social icons --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> <body> <div class="container"> <div class="auth-card"> <div class="row no-gutters"> <div class="col-md-6 left-side"> <div class="form-section"> <h2 class="text-center font-weight-bold mb-3">Sign in</h2> <div class="social-buttons"> <a href="#" class="social-circle"> <i class="fab fa-facebook-f"></i> </a> <a href="#" class="social-circle"> <i class="fab fa-google"></i> </a> <a href="#" class="social-circle"> <i class="fab fa-linkedin-in"></i> </a> </div> <div class="divider">or use your account</div> <form> <div class="form-group mb-2"> <input type="email" class="form-control" placeholder="Email" required> </div> <div class="form-group mb-2"> <input type="password" class="form-control" placeholder="Password" required> </div> <a href="#" class="forgot-password">Forgot your password?</a> <button type="submit" class="btn submit-btn w-100">Sign In</button> </form> </div> </div> <div class="col-md-6 right-side"> <h1 class="font-weight-bold">Hello, Friend!</h1> <p>Enter your personal details and <br>start journey with us</p> <button class="btn signup-btn">SIGN UP</button> </div> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap 4.1.1 JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; } .auth-card { width: 100%; max-width: 750px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; text-align:center; } .row.no-gutters { height: 100%; } .left-side { padding: 40px; background-color: white; display: flex; flex-direction: column; justify-content: center; height: 100%; } .right-side { background-color: #ff5252; color: white; padding: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .social-buttons { display: flex; gap: 15px; margin: 15px 0; justify-content: center; } .social-circle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e0e0e0; display: flex; align-items: center; justify-content: center; color: #6c757d; transition: all 0.3s ease; background-color: white; } .social-circle:hover { background-color: #f8f9fa; cursor: pointer; } .divider { text-align: center; margin: 10px 0; color: #adb5bd; font-size: 14px; } .form-control { padding: 12px 15px; border-radius: 4px; background-color: #f5f5f5; border: none; margin-bottom: 10px; height: auto; } .submit-btn { background-color: #ff5252; border: none; border-radius: 25px; padding: 12px 0; color: white; font-weight: 500; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .submit-btn:hover { background-color: #ff3838; } .signup-btn { background-color: transparent; border: 1px solid white !important; border-radius: 25px !important; padding: 12px 40px !important; color: white; font-weight: 500; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .signup-btn:hover { background-color: rgba(255, 255, 255, 0.1); } .forgot-password { color: #6c757d; text-decoration: none; font-size: 14px; display: block; text-align: center; margin: 10px 0 20px; } .forgot-password:hover { color: #ff5252; } .right-side h1 { font-size: 30px; margin-bottom: 15px; } .right-side p { margin-bottom: 25px; font-size: 16px; line-height: 1.5; } .form-section { width: 100%; padding: 30px; } @media (max-width: 767.98px) { .auth-card { max-width: 450px; margin: 15px; } .row { flex-direction: column-reverse; } .right-side, .left-side { padding: 30px; } }

Questions / Comments: