"Attractive Responsive Login form using css and bootstrap 3"
Bootstrap 3.3.0 Snippet by nitish754

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body{ margin: 0px; padding: 0px; background-color: #dddddd; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .conatiner{ padding: 10px; } .form-area{ padding: 50px; margin: 50px; background-color:aquamarine; /* box-shadow: 0 0 25px #333333; */ } .form-area h3,h4 { text-transform: capitalize; text-orientation: upright; } .form-body{ padding: 20px 20px 20px 0px; } .button{ padding: 20px 0px 0px 0px; } .left{ border-right: 2px solid #eeeeee; } .right img{ border-radius: 300px; } input[type='text'] ,input[type='password'] { border: none; padding: 0px; margin: 0px; outline: 0px; background: #ffffff; text-indent: 5px; margin: 10px; } .btn{ border-radius: 0px; } @media screen and (max-width: 1050px) { .conatiner{ width: 100%; height: auto; padding: 0px; margin: 0px; } .form-area{ padding: 0px; margin: 0px; } } </style> </head> <body> <div class="conatiner"> <div class="row form-area"> <!-- <div class="col-md-2"></div> --> <div class="col-md-6 left"> <h4>welcome back</h4> <h3>login to your account</h3> <div class="form-body"> <form action="" autocomplete="off" > <div class="form-group"> <input type="text" class="form-control" placeholder="Your Email" autocomplete="false"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="Your Password"> </div> <input type="checkbox" aria-checked="true" checked>  Remember me <a href="http://" target="_blank" rel="noopener noreferrer" class="pull-right">Forgot Password</a> <div class="form-group text-center button"> <button type="submit" class="btn btn-danger form-control">Login</button> </div> <br><br> <div class="form-group text-center"> <span style="text-transform: capitalize;">don't have account</span> <a href="http://" > click here ?</a> </div> </form> </div> </div> <div class="col-md-6 right"> <img src="https://w7.pngwing.com/pngs/919/972/png-transparent-businessperson-cartoon-people-in-the-office-meeting-text-photography-hand.png" alt="" class="img-responsive"> </div> <!-- <div class="col-md-2"></div> --> </div> </div> </body> </html>

Questions / Comments: