Best Bootstrap Login Form Style

Filled in CSS
What is it?

A few weeks ago I made ​​a post about the login form style using CSS. Now, I find the CSS login form with bootstrap. We know, bootstrap is most CSS fraemwork  used on the planet. I am using bootstrap to design an online store, this blog and others. Bootstrap is easy to use and produce responsive web design.

Login form is usually used as a screen to enter an application or service. Nearly all of the web using the login form. I found some login form designs that you can use. All use bootrap as framework. Incidentally, I was looking for a design for applications that I make. So, this list may be useful for you as well.

All this code and example using latest bootstrap version (3.03), make sure you use right version before apply. 

1. Parallax Login form with Bootstrap

parallax login form

Its awesome login form with parallax effect. Using CSS+Javascript to build it. See this code

HTML code

<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
<!-- This is a very simple parallax effect achieved by simple CSS 3 multiple backgrounds, made by http://twitter.com/msurguy -->

<div class="container">
    <div class="row%20vertical-offset-100">
    	<div class="col-md-4%20col-md-offset-4">
    		<div class="panel%20panel-default">
			  	<div class="panel-heading">
			    	<h3 class="panel-title">Please sign in</h3>
			 	</div>
			  	<div class="panel-body">
			    	<form accept-charset="UTF-8" role="form">
                    <fieldset>
			    	  	<div class="form-group">
			    		    <input class="form-control" placeholder="E-mail" name="email" type="text">
			    		</div>
			    		<div class="form-group">
			    			<input class="form-control" placeholder="Password" name="password" type="password" value="">
			    		</div>
			    		<div class="checkbox">
			    	    	<label>
			    	    		<input name="remember" type="checkbox" value="Remember%20Me"> Remember Me
			    	    	</label>
			    	    </div>
			    		<input class="btn%20btn-lg%20btn-success%20btn-block" type="submit" value="Login">
			    	</fieldset>
			      	</form>
			    </div>
			</div>
		</div>
	</div>
</div>

 CSS

body{
    background: url(http://mymaplist.com/img/parallax/back.png);
	background-color: #444;
    background: url(http://mymaplist.com/img/parallax/pinlayer2.png),url(http://mymaplist.com/img/parallax/pinlayer1.png),url(http://mymaplist.com/img/parallax/back.png);    
}

.vertical-offset-100{
    padding-top:100px;
}

Javascript (Jquery needed)

$(document).ready(function(){
  $(document).mousemove(function(e){
     TweenLite.to($('body'), 
        .5, 
        { css: 
            {
                'background-position':parseInt(event.pageX/8) + "px "+parseInt(event.pageY/12)+"px, "+parseInt(event.pageX/15)+"px "+parseInt(event.pageY/15)+"px, "+parseInt(event.pageX/30)+"px "+parseInt(event.pageY/30)+"px"
            }
        });
  });
});

This code has been created by msurguy Source. / Demo

2. Full Screen Login Form with Bootstrap

full screen login form

Full screen of image.

HTML Code

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="pr-wrap">
                <div class="pass-reset">
                    <label>
                        Enter the email you signed up with</label>
                    <input type="email" placeholder="Email" />
                    <input type="submit" value="Submit" class="pass-reset-submit%20btn%20btn-success%20btn-sm" />
                </div>
            </div>
            <div class="wrap">
                <p class="form-title">
                    Sign In</p>
                <form class="login">
                <input type="text" placeholder="Username" />
                <input type="password" placeholder="Password" />
                <input type="submit" value="Sign%20In" class="btn%20btn-success%20btn-sm" />
                <div class="remember-forgot">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" />
                                    Remember Me
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6%20forgot-pass-content">
                            <a href="javascription:void(0)" class="forgot-pass">Forgot Password</a>
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
    <div class="posted-by">Posted By: <a href="http://www.jquery2dotnet.com">Bhaumik Patel</a></div>
</div>

 CSS

body
{
    background: url('http://farm3.staticflickr.com/2832/12303719364_c25cecdc28_b.jpg') fixed;
    background-size: cover;
    padding: 0;
    margin: 0;
}

.wrap
{
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

p.form-title
{
    font-family: 'Open Sans' , sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #FFFFFF;
    margin-top: 5%;
    text-transform: uppercase;
    letter-spacing: 4px;
}

form
{
    width: 250px;
    margin: 0 auto;
}

form.login input[type="text"], form.login input[type="password"]
{
    width: 100%;
    margin: 0;
    padding: 5px 10px;
    background: 0;
    border: 0;
    border-bottom: 1px solid #FFFFFF;
    outline: 0;
    font-style: italic;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: #FFFFFF;
    outline: 0;
}

form.login input[type="submit"]
{
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 16px;
    outline: 0;
    cursor: pointer;
    letter-spacing: 1px;
}

form.login input[type="submit"]:hover
{
    transition: background-color 0.5s ease;
}

form.login .remember-forgot
{
    float: left;
    width: 100%;
    margin: 10px 0 0 0;
}
form.login .forgot-pass-content
{
    min-height: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
form.login label, form.login a
{
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
}

form.login a
{
    transition: color 0.5s ease;
}

form.login a:hover
{
    color: #2ecc71;
}

.pr-wrap
{
    width: 100%;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
}

.show-pass-reset
{
    display: block !important;
}

.pass-reset
{
    margin: 0 auto;
    width: 250px;
    position: relative;
    margin-top: 22%;
    z-index: 999;
    background: #FFFFFF;
    padding: 20px 15px;
}

.pass-reset label
{
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 15px;
}

.pass-reset input[type="email"]
{
    width: 100%;
    margin: 5px 0 0 0;
    padding: 5px 10px;
    background: 0;
    border: 0;
    border-bottom: 1px solid #000000;
    outline: 0;
    font-style: italic;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 5px;
    color: #000000;
    outline: 0;
}

.pass-reset input[type="submit"]
{
    width: 100%;
    border: 0;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 10px;
    outline: 0;
    cursor: pointer;
    letter-spacing: 1px;
}

.pass-reset input[type="submit"]:hover
{
    transition: background-color 0.5s ease;
}
.posted-by
{
    position: absolute;
    bottom: 26px;
    margin: 0 auto;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.66);
    padding: 10px;
    left: 45%;
}

Javascript (Jquery needed)

 $(document).ready(function () {
    $('.forgot-pass').click(function(event) {
      $(".pr-wrap").toggleClass("show-pass-reset");
    }); 
    
    $('.pass-reset-submit').click(function(event) {
      $(".pr-wrap").removeClass("show-pass-reset");
    }); 
});

Demo

I’ll update this list soon, please stay tune. Dont forget to subscribe our RSS feed

Update : Ok, i am back to update this awesome list.

Eternity Login Form powered by Boostrap

login form

Features

  • Flat Style Forms
  • Dark And Light Themes Available
  • Css3 Animations
  • Retina Ready
  • 350+ icons
  • Login Form,Registration Form,Forgot Password Form
  • Fully Responsive
  • Works As Modal Popup

Download

3. Gmail Style Login Form with Bootstrap

gmail login form style with bootstrap

This snippet will creating gmail login style with bootstrap. 99% similiar with gmail login style. Read the code below.

<div class="container">
    <div class="row">
        <div class="col-sm-6%20col-md-4%20col-md-offset-4">
            <h1 class="text-center%20login-title">Sign in to continue to Gmail</h1>
            <div class="account-wall">
                <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
                    alt="">
                <p class="profile-name">Bhaumik Patel</p>
                <span class="profile-email">[email protected]</span>
                <form class="form-signin">
                <input type="password" class="form-control" placeholder="Password" required autofocus>
                <button class="btn%20btn-lg%20btn-primary%20btn-block" type="submit">
                    Sign in</button>
                <a href="#" class="need-help">Need help? </a><span class="clearfix"></span>
                </form>
            </div>
            <a href="#" class="text-center%20new-account">Sign in with a different account</a>
        </div>
    </div>
</div>

and the CSS
.form-signin
{
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
    padding-top: 5px;
}
.form-signin .form-signin-heading, .form-signin .checkbox
{
    margin-bottom: 10px;
}
.form-signin .checkbox
{
    font-weight: normal;
}
.form-signin .form-control
{
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus
{
    z-index: 2;
}
.form-signin input[type="password"]
{
    margin-bottom: 10px;
}
.account-wall
{
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title
{
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img
{
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.profile-name {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
    height: 1em;
}
.profile-email {
    display: block;
    padding: 0 8px;
    font-size: 15px;
    color: #404040;
    line-height: 2;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.need-help
{
    display: block;
    margin-top: 10px;
}
.new-account
{
    display: block;
    margin-top: 10px;
}

Demo / Source / Created by BhaumikPatel

Authenty Login Form/Sign up

authenty bootstrap themes

Features

  • Latest Bootstrap
  • Responsive Design
  • HTML5/CSS3
  • 350+ icons
  • Login/Signin Forms
  • Registration/Signup Forms
  • Password Recovery Form
  • Wizard Step Form

Download

4. Flip Login Form and Register with 3D Effect

flip login form

This snippet will give a flip 3D effect, check this demo and read the code.

<div class="container">
	<div class="row">
    	<div class="container" id="formContainer">

          <form class="form-signin" id="login" role="form">
            <h3 class="form-signin-heading">Please sign in</h3>
            <a href="#" id="flipToRecover" class="flipLink">
              <div id="triangle-topright"></div>
            </a>
            <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email%20address" required autofocus>
            <input type="password" class="form-control" name="loginPass" id="loginPass" placeholder="Password" required>
            <button class="btn%20btn-lg%20btn-primary%20btn-block" type="submit">Sign in</button>
          </form>
    
          <form class="form-signin" id="recover" role="form">
            <h3 class="form-signin-heading">Enter email address</h3>
            <a href="#" id="flipToLogin" class="flipLink">
              <div id="triangle-topleft"></div>
            </a>
            <input type="email" class="form-control" name="loginEmail" id="loginEmail" placeholder="Email%20address" required autofocus>
            <button class="btn%20btn-lg%20btn-primary%20btn-block" type="submit">Recover password</button>
          </form>

        </div> <!-- /container -->
	</div>
</div>

====CSS

body {
 padding-top: 40px;
 padding-bottom: 40px;
 background-color: #ddd;
}

.form-signin {
 max-width: 330px;
 padding: 15px;
 margin: 0 auto;
 background-color: #f3f3f3;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
 margin-bottom: 10px;
}
.form-signin .checkbox {
 font-weight: normal;
}
.form-signin .form-control {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 position: relative;
 font: 15px 'Segoe UI',Arial,sans-serif;
 background-color: #EAEBE5;
 height: auto;
 padding: 10px;
 color:#7e8c8d;
 outline:none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

.form-signin .form-control:focus {
 z-index: 2;
}
.form-signin input[type="email"] {
 margin-bottom: -1px;
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
 margin-bottom: 10px;
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}

#recover input[type="email"] {
 margin-bottom: 10px;
 border-bottom-left-radius: 0;
 border-bottom-right-radius: 0;
}

/*___________________________________*/
.container {
 border-top: 2px solid #aaa;
 box-shadow: 0 2px 10px rgba(0,0,0,0.8);
 width:288px;
 height:321px;
 margin:0 auto;
 position:relative;
 z-index:1;
 
 -moz-perspective: 800px;
 -webkit-perspective: 800px;
 perspective: 800px;
}

.container form {
 width:100%;
 height:100%;
 position:absolute;
 top:0;
 left:0;
 
 /* Enabling 3d space for the transforms */
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 
 /* When the forms are flipped, they will be hidden */
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 
 /* Enabling a smooth animated transition */
 -moz-transition:0.8s;
 -webkit-transition:0.8s;
 transition:0.8s;

}


.container.flipped .form-signin{
 
 opacity:0;
 
 /**
 * Rotating the login form when the
 * flipped class is added to the container
 */
 
 -moz-transform:rotateY(-180deg);
 -webkit-transform:rotateY(-180deg);
 transform:rotateY(-180deg);
}

.container.flipped #recover{
 
 opacity:1;
 
 /* Rotating the recover div into view */
 -moz-transform:rotateY(0deg);
 -webkit-transform:rotateY(0deg);
 transform:rotateY(0deg);
}


.form-signin {
 z-index:100;
}

 
 /* Enabling 3d space for the transforms */
 -moz-transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
 
 /* When the forms are flipped, they will be hidden */
 -moz-backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 
 /* Enabling a smooth animated transition */
 -moz-transition:0.8s;
 -webkit-transition:0.8s;
 transition:0.8s;

}

#login{
 background: #f3f3f3;
 z-index: 100;
}

#recover:before {
 /* The "Click here" tooltip */
 width:100px;
 height:26px;
 content:'Sign in ->';
 position:absolute;
 right:270px;
 top:15px;
}

#login:after {
 /* The "Click here" tooltip */
 width:150px;
 height:26px;
 content:'<- Forgot password?';
 position:absolute;
 right:-170px;
 top:15px;
}

#recover{
 background:#f3f3f3;
 z-index:1;
 
 /* Rotating the recover password form by default */
 -moz-transform:rotateY(180deg);
 -webkit-transform:rotateY(180deg);
 transform:rotateY(180deg);
}

#formContainer.flipped #login{
 
 opacity:0;
 
 /**
 * Rotating the login form when the
 * flipped class is added to the container
 */
 
 -moz-transform:rotateY(-180deg);
 -webkit-transform:rotateY(-180deg);
 transform:rotateY(-180deg);
}

#formContainer.flipped #recover{
 
 opacity:1;
 
 /* Rotating the recover div into view */
 -moz-transform:rotateY(0deg);
 -webkit-transform:rotateY(0deg);
 transform:rotateY(0deg);
}


/*----------------------------
 Inputs, Buttons & Links
-----------------------------*/


#login .flipLink,
#recover .flipLink{ 
 height: 50px;
 overflow: hidden;
 position: absolute;
 right: 0;
 text-indent: -9999px;
 top: 0;
 width: 50px;
}

#triangle-topright {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 width: 0;
 height: 0;
 border-top: 100px solid #ddd; 
 border-left: 100px solid transparent;
}

#triangle-topleft {
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 right:auto;
 left:0;
 width: 0;
 height: 0;
 border-top: 50px solid #ddd;
 border-right: 50px solid transparent; 
}

#recover .flipLink{
 right:auto;
 left:0;
}

#forkongithub a {
 box-sizing: content-box;
 background:#ddd;
 color:#fff;
 text-decoration:none;
 font-family:arial, sans-serif;
 text-align:center;
 font-weight:bold;
 padding:5px 40px;
 font-size:1rem;
 line-height:2rem;
 position:relative;
 transition:0.5s;
}

#forkongithub a:hover {
 background:#aaa;
 color:#fff;
}

#forkongithub a::before, #forkongithub a::after {
 content:"";
 width:100%;
 display:block;
 position:absolute;
 top:1px;
 left:0;
 height:1px;
 background:#fff;
}

#forkongithub a::after {
 bottom:1px;
 top:auto;
}

@media screen and (min-width:800px){
 #forkongithub {
 position:absolute;
 display:block;
 top:0;
 right:0;
 width:200px;
 overflow:hidden;
 height:200px;
 }

 #forkongithub a {
 width:200px;
 position:absolute;
 top:60px;
 right:-60px;
 transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 box-shadow:2px 2px 10px rgba(0,0,0,0.8);
 }
}

==============Javascript

$(function(){
 
 // Checking for CSS 3D transformation support
 $.support.css3d = supportsCSS3D();
 
 var formContainer = $('#formContainer');
 
 // Listening for clicks on the ribbon links
 $('.flipLink').click(function(e){
 
 // Flipping the forms
 formContainer.toggleClass('flipped');
 
 // If there is no CSS3 3D support, simply
 // hide the login form (exposing the recover one)
 if(!$.support.css3d){
 $('#login').toggle();
 }
 e.preventDefault();
 });
 
 formContainer.find('form').submit(function(e){
 // Preventing form submissions. If you implement
 // a backend, you might want to remove this code
 e.preventDefault();
 });
 
 
 // A helper function that checks for the 
 // support of the 3D CSS3 transformations.
 function supportsCSS3D() {
 var props = [
 'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
 ], testDom = document.createElement('a');
 
 for(var i=0; i<props.length; i++){
 if(props[i] in testDom.style){
 return true;
 }
 }
 
 return false;
 }
});

Source

Tidy Login Form

tidy login from

Feature

  1. Fully integrated Facebook login
  2. Fully integrated Gravatar images (enter an email address to see it working)
  3. Working email form
  4. Unobtrusive jQuery animations
  5. Uses the beautiful “Lato” font from Google Web Fonts
  6. Well structured and clearly commented code
  7. Includes SASS files for easy customisation

Download

Meta Details