<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="http://cdn.materialdesignicons.com/2.1.99/css/materialdesignicons.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 mx-auto"> <div class="card"> <div class="card-body"> <form> <div class="form-group"> <label>Email address <span class="text-danger">*</span></label> <input type="email" class="form-control" placeholder="Enter Email address"> </div> <div class="form-group"> <label>Password <span class="text-danger">*</span></label> <input type="password" class="form-control" placeholder="Enter Password"> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">Remember Me</label> </div> </div> <button type="submit" class="btn btn-success btn-block">SIGN IN</button> </form> <div class="mt-4 text-center login-with-social"> <button type="button" class="btn btn-outline-primary btn-block"><i class="mdi mdi-facebook"></i> Login With Facebook</button> <button type="button" class="btn btn-outline-info btn-block"><i class="mdi mdi-twitter"></i> Login With Twitter</button> <button type="button" class="btn btn-outline-danger btn-block"><i class="mdi mdi-google-plus"></i> Login With Google</button> </div> <div class="mt-4 text-center"> <a href="forget.html">Forget your password?</a> </div> </div> </div> </div> </div> </div>