<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <img src="https://www.ccdevelop.com/internal/support/assets/logo_dark.gif" alt="Heart Desk"> <div class="card card-container"> <form class="form-secure" method="post" action="login.php"> <input type="email" name="username" class="form-control" placeholder="Email Address" autofocus required> <input type="password" name="password" class="form-control gap" placeholder="Password" required> <div><label><input type="checkbox" name="remember" value="1"> Remember me</label></div> <button class="btn btn-lg btn-primary" type="submit">Login</button> </form> </div> <div class="branding">Copyright © 2017 CC Develop Ltd</div> </div>

body, html { background-color: #fff; } .card-container.card { max-width: 20em; } div.container img { width: 10em; position: relative; top: 2.25em; left: 50%; margin-left: -10em; } div.branding { position: relative; top: 0.5rem; left: 0; width: 100%; text-align: center; font-size: 0.7em; color: #A5A5A5; } .card { background-color: #f5f5f5; margin: 0 auto; margin-top: 3.125em; -moz-border-radius: 0.125em; -webkit-border-radius: 0.125em; border-radius: 0.125em; padding: 1.75em; -moz-box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.2); box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.2); } .form-secure input[type=email], .form-secure input[type=password], .form-secure input[type=text] { height: 2.5em; font-size: 1em; } .gap { margin-top: 1em; } .form-secure input[type=checkbox] { margin-top: 1em; margin-bottom: .5em; } .form-secure input[type=email], .form-secure input[type=password], .form-secure input[type=text], .form-secure button { width: 100%; display: block; } .form-secure button { cursor: pointer; }