<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 ----------> <div class="form-body"> <div class="form-holder"> <div class="form-content"> <div class="form-items"> <div class="logo"> <a href=""> <img src="https://i.ibb.co/DQ84Ykc/logo4.png" alt="" width="100px"> </a> </div> <div class="info"> <h3>Mauris in turpis.</h3> <p>Lorem ipsum dolor sit amet, adipisicing elit. Ad aliquam, impedit in inventore maxime!</p> </div> <div class="page-links"> <a href="" class="active">Login</a> <a href="register.html">Register</a> </div> <form action=""> <input type="text" class="form-control" name="username" placeholder="E-mail Address" required> <input type="password" class="form-control" name="password" placeholder="Password" required> <div class="form-button"> <input class="btn" type="submit" value="Login"> <a href="">Forget password?</a> </div> </form> <div class="other-links"> <span>Or login with  </span> <a href="">Facebook</a> <a href="">Google</a> <a href="">Linkedin</a> </div> </div> </div> </div> </div>

html, body { height: 100%; } .form-body, .form-holder{ height: 100%; } .form-holder{ width: 100%; } .form-content{ position: relative; text-align: center; display: flex; justify-content: center; align-items: center; min-height: 100%; background:url(https://i.ibb.co/mtHRD3r/bg3.jpg) no-repeat; background-size: cover; } .form-items { display: inline-block; width: 100%; max-width: 400px; padding: 30px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: #ffffffa3; } .form-items a{ color : #000; margin-right: 20px; } .info p{ margin-bottom: 0; } .info h3{ font-weight: 900; } .logo, .info, .page-links, form{ margin-bottom: 30px; } .page-links a{ margin-right: 20px; color: rgba(0, 0, 0, 0.55); text-decoration: none; } .page-links a:hover{ color: #000; } .page-links a.active{ border-bottom: 1px solid; color: #000; } .form-control{ margin-bottom: 10px; border: 0; border-bottom: 1px solid; border-radius: 0; background-color: transparent; color: #000; padding: 0; } .form-control:focus{ outline: 0; border-color: #000; box-shadow: none; background-color: transparent!important; } .form-control::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.51); } .form-button{ margin-top: 30px; } .form-button .btn{ margin-right: 20px; padding-right: 30px; padding-left: 30px; background-color: #ffa610; border-color: #ffa610; border-radius: 0; color: #fff; } .other-links{ font-size: 12px; } .other-links a{ margin-right: 10px; } @media (max-width:450px){ .info h3{ font-size: 20px; } .info p{ font-size: 12px; } .form-content .form-items{ max-width: 300px; } .form-button .btn { margin-right: 10px; padding-right: 20px; padding-left: 20px; } }