"Login Form With Fully Responsive By Tarun sharma"
Bootstrap 4.0.0 Snippet by Tarunsharma

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> </head> <body> <div class="image-holder"> <p> <strong>Society Managment System</strong></p> </div> <div class="form-container"> <form method="post"> <h2 class="text-center"><strong>Login</strong></h2> <div class="form-group"><input class="form-control" type="text" name="email" placeholder="Email"></div> <div class="form-group"><input class="form-control" type="text" name="password" placeholder="Password"></div> <div class="form-group"><button class="btn btn-success btnlogin" type="submit">Login</button></div> <div class="backtologin"><a href="~/ForgotPassword">Forgot Password ?</a></div> </form> </div> </body> </html>
body { background-image: url("https://im.proptiger.com/1/677476/6/woodland-heights-elevation-107172245.jpeg"); background-repeat: no-repeat; } .btnlogin { width: 45%; margin-left: auto; margin-right: auto; display: block !important; } .image-holder { display: table-cell; width: auto; } .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-50px, 144px); } form { display: table-cell; width: 361px; background-color: #ffffff; padding: 24px 24px; color: #505e6c; } @media (max-width:991px) { form { padding: 40px } } form h2 { font-size: 24px; line-height: 1.5; margin-bottom: 30px } form .form-control { background: transparent; border: none; border-bottom: 1px solid #dfe7f1; border-radius: 0; box-shadow: none; outline: none; color: inherit; text-indent: 0px; height: 40px } form .form-check { font-size: 13px; line-height: 20px } form .btn-primary { background: green; border: none; border-radius: 4px; padding: 11px; box-shadow: none; margin-top: 35px; text-shadow: none; outline: none !important } form .btn-primary:hover, form .btn-primary:active { background: green } form .btn-primary:active { transform: translateY(1px) } form .already { display: block; text-align: center; font-size: 12px; color: #6f7a85; opacity: 0.9; text-decoration: none } .form-group { margin-bottom: 2rem !important; } input[type="text"] { border: none; border-bottom: 1px solid #000; border-radius: 0; outline: none; padding:0 } .image-holder { font-size: 43px; width: 70%; float: left; text-align: center; transform: translate(50px, 270px); } .image-holder p { color: #000 } @media (max-width:1024px) { .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-50px, 221px); } .image-holder { font-size: 43px; width: 52%; float: left; text-align: center; transform: translate(54px, 302px); } } @media (max-width:823px) { .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-50px, 28px); } .image-holder { font-size: 43px; width: 39%; float: left; text-align: center; transform: translate(50px, 97px); } } @media (max-width:768px) { .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-50px, 187px); } .image-holder { font-size: 43px; width: 39%; float: left; text-align: center; transform: translate(50px, 236px); } } @media (max-width:767px) { .image-holder { /* margin: 238px auto; */ font-size: 43px; width: 70%; float: left; text-align: center; /* margin-right: -50%; */ transform: translate(96px, 50px); } .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-141px, 70px); } } @media (max-width: 736px) { .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-195px, 70px); } } @media (max-width: 731px) { .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-195px, 70px); } } @media (max-width: 667px) { .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-152px, 70px); } } @media (max-width: 568px) { .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-80px, 70px); } } @media (max-width: 414px) { .image-holder { /* margin: 238px auto; */ font-size: 43px; width: 70%; float: left; text-align: center; /* margin-right: -50%; */ transform: translate(45px, 49px); } .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-26px, 70px); } } @media (max-width: 411px) { .image-holder { /* margin: 238px auto; */ font-size: 43px; width: 70%; float: left; text-align: center; /* margin-right: -50%; */ transform: translate(45px, 49px); } .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-26px, 70px); } } @media (max-width: 375px) { .image-holder { /* margin: 238px auto; */ font-size: 43px; width: 70%; float: left; text-align: center; /* margin-right: -50%; */ transform: translate(45px, 49px); } .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(-7px, 70px); } } @media (max-width: 360px) { .image-holder { /* margin: 238px auto; */ font-size: 43px; width: 70%; float: left; text-align: center; /* margin-right: -50%; */ transform: translate(45px, 49px); } .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(0px, 70px); } } @media (max-width: 320px) { .image-holder { /* margin: 238px auto; */ font-size: 43px; width: 70%; float: left; text-align: center; /* margin-right: -50%; */ transform: translate(45px, 49px); } .form-container { /* display: table; */ /* max-width: 900px; */ /* width: 30%; */ /* margin: 0 auto; */ box-shadow: 1px 1px 5px rgb(0 0 0 / 10%); float: right; transform: translate(0px, 70px); } }

Related: See More


Questions / Comments: