"Easy Log in form"
Bootstrap 3.2.0 Snippet by TavoQiqe

<section id="login"> <div class="container"> <div class="row"> <div class="col-xs-12"> <div class="form-wrap"> <h1>Log in with your email account</h1> <form role="form" action="javascript:;" method="post" id="login-form" autocomplete="off"> <div class="form-group"> <label for="email" class="sr-only">Email</label> <input type="email" name="email" id="email" class="form-control" placeholder="somebody@example.com"> </div> <div class="form-group"> <label for="key" class="sr-only">Password</label> <input type="password" name="key" id="key" class="form-control" placeholder="Password"> </div> <div class="checkbox"> <span class="character-checkbox" onclick="showPassword()"></span> <span class="label">Show password</span> </div> <input type="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Log in"> </form> <a href="javascript:;" class="forget" data-toggle="modal" data-target=".forget-modal">Forgot your password?</a> <hr> </div> </div> <!-- /.col-xs-12 --> </div> <!-- /.row --> </div> <!-- /.container --> </section> <div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> <h4 class="modal-title">Recovery password</h4> </div> <div class="modal-body"> <p>Type your email account</p> <input type="email" name="recovery-email" id="recovery-email" class="form-control" autocomplete="off"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-custom">Recovery</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> <footer id="footer"> <div class="container"> <div class="row"> <div class="col-xs-12"> <p>Page © - 2014</p> <p>Powered by <strong><a href="http://www.facebook.com/tavo.qiqe.lucero" target="_blank">TavoQiqe</a></strong></p> </div> </div> </div> </footer>
/* -------------------------------------------------- :: Login Section -------------------------------------------------- */ #login { padding-top: 50px } #login .form-wrap { width: 30%; margin: 0 auto; } #login h1 { color: #1fa67b; font-size: 18px; text-align: center; font-weight: bold; padding-bottom: 20px; } #login .form-group { margin-bottom: 25px; } #login .checkbox { margin-bottom: 20px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } #login .checkbox.show:before { content: '\e013'; color: #1fa67b; font-size: 17px; margin: 1px 0 0 3px; position: absolute; pointer-events: none; font-family: 'Glyphicons Halflings'; } #login .checkbox .character-checkbox { width: 25px; height: 25px; cursor: pointer; border-radius: 3px; border: 1px solid #ccc; vertical-align: middle; display: inline-block; } #login .checkbox .label { color: #6d6d6d; font-size: 13px; font-weight: normal; } #login .btn.btn-custom { font-size: 14px; margin-bottom: 20px; } #login .forget { font-size: 13px; text-align: center; display: block; } /* -------------------------------------------------- :: Inputs & Buttons -------------------------------------------------- */ .form-control { color: #212121; } .btn-custom { color: #fff; background-color: #1fa67b; } .btn-custom:hover, .btn-custom:focus { color: #fff; } /* -------------------------------------------------- :: Footer -------------------------------------------------- */ #footer { color: #6d6d6d; font-size: 12px; text-align: center; } #footer p { margin-bottom: 0; } #footer a { color: inherit; }
function showPassword() { var key_attr = $('#key').attr('type'); if(key_attr != 'text') { $('.checkbox').addClass('show'); $('#key').attr('type', 'text'); } else { $('.checkbox').removeClass('show'); $('#key').attr('type', 'password'); } }

Similar snippets: See More


laurens 2014-10-18 17:07:59
    Thanks :)
Miguel Machado 2014-10-22 15:21:52
    Great.. I liked this checkbox..
TavoQiqe 2014-10-24 06:15:12
    Thanks dude, that's all I need to post more works, hope this helps you in something interesting.
Miguel Machado 2014-11-21 17:14:26
    Really! Will Help me with sure in my news jobs! Thanks
Banaot 2014-10-22 22:04:46
    do i need Glyphicons Halflings icon font for this? Thanks anyways, good job.
TavoQiqe 2014-10-24 06:13:48
    The check icon is from Font Awesome, but you can use glyphicons from bootsrap.
kunal 2014-10-23 18:26:38
    Which js files and Css do i need to include ? to implement validation..
TavoQiqe 2014-10-24 06:12:25
    All you need is bootstrap 3, jQuery, Font Awesome and that's it.
zafer 2014-10-28 15:05:13
    checkbox doesnt work from me
L34ndr0 2014-10-28 19:06:34
    include jquery at page
Eduardo Kawassaki 2014-11-01 22:55:28
    <link href="//netdna.bootstrapcdn.com/boo..." rel="stylesheet" id="bootstrap-css">
L34ndr0 2014-10-28 19:00:24
    good job, i changed the glyphicon to font-awesome, at checkbox checked icon
Виктор Славов 2014-11-25 23:14:37
    The "Forgot your password" is not working for me, any ideas? I am using the sass bootstrap, may that be it?
maxsurguy 2014-11-25 23:40:57
    what happens there? Also make sure you have the Javascript from Bootstrap because modal depends on that
Виктор Славов 2014-11-27 16:54:58
    yep, the js from bootstrap was the problem, 10x (:
Ryan Harmon 2016-05-03 05:21:30
Nguyen Anh Quan 2016-08-05 15:24:01
    I can't click on checkbox and when I click into Forgot your password? nothing happens. I have included boostrap into my project. All is nomal except both of them :(
Man 2016-12-13 11:32:59
    What are the JS and CSS files to include ? HELP PLEASE
In bootstrap-3.3.7

Commenting will be back soon.