Bootstrap Snippet Modal Login using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container">
    <div class="row mt-4">
        <h2>Button Modal Login By Monkey-TH.CoM</h2>
    </div>
    
    <div class="row mt-4">
        <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#loginFrm">Login</button>
    </div>
    
    <div class="modal fade" id="loginFrm" tabindex="-1" role="dialog" aria-labelledby="loginFrm" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Login...</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
              
            <div class="input-group">
                <span class="input-group-addon addon-facebook rounded-0">
                    <i class="fa fa-fw fa-facebook"></i>
                </span>
                <button type="button" class="btn btn-block btn-facebook rounded-0 text-left">Login with Facebook</button>
            </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#loginFrm .modal-header {
    background-color: #1D1E23;
    color: #C1C1C3;
}
#loginFrm .modal-header .close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    color: #C1C1C3 !important;
    font-size: 16px;
    font-weight: normal;
}
#loginFrm .modal-footer {
    border: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: #5bc0de;
}
#loginFrm .modal-footer:hover,
#loginFrm .modal-footer:hover button.btn-info {
    background-color: #31b0d5;
    border-color: #2aabd2;
}
#loginFrm .modal-footer button {
    font-size: 13px;
}
#loginFrm .modal-footer button.btn-danger {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Modal Login"
Bootstrap 4.0.0 Snippet by vilet224

Related: See More

Questions / Comments:

"Modal Login" Bootstrap 4.0.0 Snippet by vilet224

Related: See More

Questions / Comments:

"Modal Login"
Bootstrap 4.0.0 Snippet by vilet224