"Full width login form"
Bootstrap 2.3.2 Snippet by msurguy

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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"> <div class="span4 offset4 well"> <legend>Please Sign In</legend> <div class="alert alert-error"> <a class="close" data-dismiss="alert" href="#">×</a>Incorrect Username or Password! </div> <form method="POST" action="" accept-charset="UTF-8"> <input type="text" id="username" class="span4" name="username" placeholder="Username"> <input type="password" id="password" class="span4" name="password" placeholder="Password"> <label class="checkbox"> <input type="checkbox" name="remember" value="1"> Remember Me </label> <button type="submit" name="submit" class="btn btn-info btn-block">Sign in</button> </form> </div> </div> </div>

Related: See More

Full width contact form
Full width Pic
Full Width Carousel
Full Width Tabs

Questions / Comments:

Nice! Thanks!

Alexander (0) - 5 years ago - Reply 0

Very nice form. I tried adding icons to each input field (prepend), but it was stretching the inputs too far. Maybe include a second version with icons?

Sean Taylor (0) - 5 years ago - Reply 0

Try to use the new Bootstrap3.. then, the glyphicons are FONT's. You can resize the font(icon size).

<div class="col-md-4 input-group">

<input type="text" class="form-control input-sm" id="Login1" name="UserName" placeholder="Username">
</div>

the minimum input size that you have is with class "input-sm" , then you can put in the of the icon, the style="font-size:10px;"


cheers

Marcio Cardoso (0) - 4 years ago - Reply 0

Thanks a ton!

Pankaj C. (0) - 5 years ago - Reply 0

Pretty Good login form :)

இராஜேஷ் குமார் ஆணிமுத்து (0) - 5 years ago - Reply 0