"Pinterest like login box"
Bootstrap 3.0.0 Snippet by azhagu

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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 ----------> <div class="container"> <div class="row"> <form class="form-signin mg-btm"> <h3 class="heading-desc"> <button type="button" class="close pull-right" aria-hidden="true">×</button> Login to Bootsnipp</h3> <div class="social-box"> <div class="row mg-btm"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-block"> <i class="icon-facebook"></i>    Login with Facebook </a> </div> </div> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-info btn-block" > <i class="icon-twitter"></i>    Login with Twitter </a> </div> </div> </div> <div class="main"> <input type="text" class="form-control" placeholder="Email" autofocus> <input type="password" class="form-control" placeholder="Password"> Are you a business? <a href=""> Get started here</a> <span class="clearfix"></span> </div> <div class="login-footer"> <div class="row"> <div class="col-xs-6 col-md-6"> <div class="left-section"> <a href="">Forgot your password?</a> <a href="">Sign up now</a> </div> </div> <div class="col-xs-6 col-md-6 pull-right"> <button type="submit" class="btn btn-large btn-danger pull-right">Login</button> </div> </div> </div> </form> </div> </div>
.form-signin { max-width: 400px; display:block; background-color: #f7f7f7; -moz-box-shadow: 0 0 3px 3px #888; -webkit-box-shadow: 0 0 3px 3px #888; box-shadow: 0 0 3px 3px #888; border-radius:2px; } .main{ padding: 38px; } .social-box{ margin: 0 auto; padding: 38px; border-bottom:1px #ccc solid; } .social-box a{ font-weight:bold; font-size:18px; padding:8px; } .social-box a i{ font-weight:bold; font-size:20px; } .heading-desc{ font-size:20px; font-weight:bold; padding:38px 38px 0px 38px; } .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: 20px; padding: 20px; -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="text"] { margin-bottom: 10px; border-radius: 5px; } .form-signin input[type="password"] { margin-bottom: 10px; border-radius: 5px; } .login-footer{ background:#f0f0f0; margin: 0 auto; border-top: 1px solid #dadada; padding:20px; } .login-footer .left-section a{ font-weight:bold; color:#8a8a8a; line-height:19px; } .mg-btm{ margin-bottom:20px; }

Related: See More

Questions / Comments:

Very nice

Junaid Atari () - 9 years ago - Reply 0

Used that today. Don't know why, but link to css file not working. Added strings:

<link href="css/login.css" rel="stylesheet">

Maya () - 10 years ago - Reply 0

Perhaps a stupid question, but I am really new to it! How could I implement this form in joomla 3? Is it possible via custom htlm module?

Panos () - 10 years ago - Reply 0

Does Joomla use Bootstrap?

maxsurguy () - 10 years ago - Reply 0

Maxsurguy, could you please guide me on which files to add the code given in order to get it working?

Panos () - 10 years ago - Reply 0

if it uses Bootstrap 3 then copying this snippet HTML should be enough. What result do you see?

maxsurguy () - 10 years ago - Reply 0

Maxgury, it worked fine! A few modifications to the css and here it is! One question... What do I need to do in order to get it working? Ok, every button is there, but no function at the moment!

Panos () - 10 years ago - Reply 0

well, that is something that is definitely outside of the scope of Bootsnipp. You will need to create a web application with a backend. For example you could use PHP and a framework called Laravel (http://laravel.com) to create your application.

maxsurguy () - 10 years ago - Reply 0

Thank you maxsurguy for your kindness to help me!

Panos () - 10 years ago - Reply 0

You're welcome! Enjoy Bootsnipp and other projects I'm running :)

maxsurguy () - 10 years ago - Reply 0


Panos () - 10 years ago - Reply 0

Anyone who's having problems like Nilesh mentioned below - you just need to adjust the height and padding of the textbox.

I found the following worked best for me:
.form-signin .form-control {
position: relative;
font-size: 16px;
height: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Kyle Whittington () - 10 years ago - Reply 0

Awesome thanks for that, ran into the exact same problem just now.

Jason MacLulich () - 8 years ago - Reply 0

Does not work for 3.1.0 in Firefox 26.0!

Nilesh () - 10 years ago - Reply 0

Many thx!

BenDaly () - 10 years ago - Reply 0

Used this today - EXACTLY what I needed! Huge thanks!

Travis Layne () - 10 years ago - Reply 0

thanks Travis Layne

Guest () - 10 years ago - Reply 0

thanks to you too

Guest () - 9 years ago - Reply 0