<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 ----------> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <div class="grandParentContainer"> <div class="parentContainer"> <div align="center"> <form class="loginForm" role="form"> <h2>LOGIN</h2> <div class="form-group"> <label for="email" class="col-sm-3 control-label">Email </label> <div class="col-sm-9"> <input type="email" id="email" placeholder="Email" class="form-control"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-3 control-label">Password</label> <div class="col-sm-9"> <input type="password" id="password" placeholder="Password" class="form-control"> </div> </div> <button type="submit" class="btn btn-primary btn-block">Login</button> <span class="help-block"><a href="#">I don't have an account yet! </a></span> </form> <!-- /form --> </div> </div> </div>

body { background: url('https://static-communitytable.parade.com/wp-content/uploads/2014/03/rethink-target-heart-rate-number-ftr.jpg'); background-size: cover; height:100%; } .grandParentContaniner{ height:50%; margin: 0; } .parentContainer{ vertical-align:middle; height:100%; } .loginForm { vertical-align: middle; max-width: 330px; padding: 15px; border-radius: 0.3em; background-color: #f2f2f2; } *[role="form"] h2 { font-family: 'Open Sans' , sans-serif; font-size: 40px; font-weight: 600; color: #000000; margin-top: 5%; text-align: center; text-transform: uppercase; letter-spacing: 4px; }