<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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container h-100"> <div class="d-flex justify-content-center h-100"> <div class="user_card"> <img src="https://cdn.freebiesupply.com/logos/large/2x/pinterest-circle-logo-png-transparent.png" class="brand_logo" alt="Logo"> <div class="d-flex justify-content-center form_container"> <form> <div class="input-group mb-3"> <input type="text" name="" class="form-control input_user" value="" placeholder="username"> </div> <div class="input-group mb-2"> <input type="password" name="" class="form-control input_pass" value="" placeholder="password"> </div> <div class="d-flex justify-content-center mt-3 login_container"> <button type="button" name="button" class="btn btn-warning login-btn"><span class="">Login</span> <i class="fa fa-circle-o-notch fa-spin"></i></button> </div> </form> </div> </div> </div> </div>

.h-100 { height: 100%!important; } .form_container{ margin-top:15px; } .user_card { margin-top: auto; margin-bottom: auto; position: relative; display: flex; justify-content: center; flex-direction: column; } .brand_logo { height: 150px; width: 150px; position:relative; margin:0 auto; } .login-btn{ width:100%; text-align:left; position:relative; } .login-btn i{ position: inherit; top: -50%; right: -25%; } .login-btn span{ position:rekative; text-align:left; }