Bootstrap Snippet Login using HTML CSS jQuery

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container text-center">
    <form class="form-signin" id='login_form'>
         <h2 class="text-center">Log In <small> let's go!</small></h2>
        <div class='facebookLogin'>
            
            <button href='/login/facebook' class="btn btn-lg btn-primary btn-block btn-facebook"><i class="fa fa-facebook fa-fw"></i> Log In with Facebook</button>
            <hr>
            
            <span class="help-block text-center"> <a id='emailLogin'>Log In using e-mail</a>
            </span>
        </div>
        <div class='emailLogin'>
            <fieldset id='login_ield'>
                <div class="form-group">
                <input type="email" class="form-control" placeholder=".edu email address" name="email" id='email' autofocus>
                </div>
                <div class="form-group">
                <input type="password" class="form-control" name="password" placeholder="password" id='passwd'>
                </div>
                    </fieldset>
            <button id="signInBtn" class="btn btn-lg btn-primary btn-block" type="submit">Log In</button>
            <span class="help-block text-center">Forgot your password? <a href='/reset/'>Reset it</a></span>
            <span class="help-block text-center">Don't have an account? <a href='/signup/'>Sign up</a> now!</span>
        </div>
    </form>
        </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
.bv-form .help-block {
    margin-bottom:0
}
.nav-tabs li.bv-tab-success>a {
    color:#3c763d
}
.nav-tabs li.bv-tab-error>a {
    color:#a94442
}
/* ladda.min.css */
/*
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 */
.ladda-button {
    position:relative
}
.ladda-button .ladda-spinner {
    position:absolute;
    z-index:2;
    display:inline-block;
    width:32px;
    height:32px;
    top:50%;
    margin-top:-16px;
    opacity:0;
    pointer-events:none
}
.ladda-button .ladda-label {
    position:relative;
    z-index:3
}
.ladda-button .ladda-progress {
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
// OLD JS 
$(document).ready(function () {
$('#emailLogin').on('click', function () {
    $('.facebookLogin').fadeOut(250, function () {
        $('.emailLogin').fadeIn(500);
    });
});
$('#facebookLogin').on('click', function () {
    $('.emailLogin').fadeOut(250, function () {
        $('.facebookLogin').fadeIn(500);
    });
});
});
// Bootstrap Validator Form
$(document).ready(function () {
    $('#login_form').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                message: 'The email name is not valid',
                validators: {
                    notEmpty: {
                        message: 'Your email is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The value is not a valid email address'
                    }
                }
            },
            password: {
                validators: {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Login"
Bootstrap 3.1.0 Snippet by mitchellias

Related: See More

Questions / Comments:

"Login" Bootstrap 3.1.0 Snippet by mitchellias

Related: See More

Questions / Comments:

"Login"
Bootstrap 3.1.0 Snippet by mitchellias