<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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <!-- TRIGGER --> <a class="btn btn-lg btn-primary" href="#SignInModal" data-toggle="modal" data-target="#SignInModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a> <!-- MODAL --> <div class="modal fade brandmodal" id="SignInModal" role="dialog"> <div class="modal-dialog modal-md"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title"><img src="http://www.5050central.com/uploads/66_Columbus_BlueJackets.svg.png" class="modal-logo" /></h4> </div> <div class="modal-body"> <div class="alert alert-danger hidden-xs-up"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> <i class="fa fa-warning"></i> <strong>Warning:</strong> Alert </div> <form action="" method="POST" autocomplete="off"> <h4><i class="fa fa-lock"></i> <strong>Login</strong></h4> <div class="modalform-group"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-envelope"></i> </span> <input type="email" name="email" class="form-control" placeholder="Email" required="" /> </div> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-key"></i> </span> <input type="password" name="password" class="form-control" placeholder="Password" required="" /> </div> </div> <button type="submit" class="btn btn-block btn-danger"><i class="fa fa-sign-in"></i> <strong>Sign In</strong> </button> </div> </form> </div> <div class="modal-footer"> <span class="pull-left"><a href="#" class="btn btn-default btn-sm "><i title="Forgot Password ?" class="fa fa-1x fa-question-circle"></i> Forgot Password ? </a></span> <p class="right-aligned"><strong>New</strong> to <strong>JobCorp</strong>? <a href="#register" class="btn btn-danger btn-md">Register</a></p> </div> </div> </div> </div>

/* Modal Box */ .modal-logo { max-width:70px; max-height:70px; } .brandmodal .modal-title { text-align: center; } .brandmodal .modal-body { background:#243B81; color:#FFFFFF; } .modal-body h4 { text-align: center; margin:0 auto; background:#243B81; padding:5px; color:white; margin-bottom:2px; border-radius:5px 5px 0px 0px;} /* MoDAL FORM */ .modalform-group { border-radius:0px; overflow: hidden; padding:0px; } .modalform-group input,.modalform-group span { border-radius:0px; border:1px solid #243B81; border-right:2px solid #243B81; } .modalform-group span { background:#243B81; color:#FFFFFF; } .modalform-group input[type=button],.modalform-group input[type=submit],.modalform-group button { border-radius:2px; margin-top:2px; }