"Small Sign Up"
Bootstrap 3.0.0 Snippet by BhaumikPatel

Post to Facebook Tweet this

<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"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-default"> <div class="panel-body"> <h5 class="text-center"> SIGN UP</h5> <form class="form form-signup" role="form"> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" placeholder="Username" /> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> </span> <input type="text" class="form-control" placeholder="Email Address" /> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" class="form-control" placeholder="Password" /> </div> </div> </div> <a href="http://www.jquery2dotnet.com" class="btn btn-sm btn-primary btn-block" role="button"> SUBMIT</a> </form> </div> </div> </div> </div> </div>
body { background-color: #1b1b1b; padding-top: 40px; } .input-group-addon { background-color: rgb(50, 118, 177); border-color: rgb(40, 94, 142); color: rgb(255, 255, 255); } .form-control:focus { background-color: rgb(50, 118, 177); border-color: rgb(40, 94, 142); color: rgb(255, 255, 255); } .form-signup input[type="text"],.form-signup input[type="password"] { border: 1px solid rgb(50, 118, 177); }

Related: See More

Material Kit PRO BS3
sign up 2
Bootstrap 4.11 sign in form
Sign up form [Validations NOT ACHIEVED]

Questions / Comments:

thanks..great job

Michael Sorebac () - 10 years ago - Reply 0

Very very Nice job

Jugal Kishore () - 10 years ago - Reply 0

not very responsive, see for yourself, stretch and narrow the browser window and see what happens.
it uses a fixed div class col-md-4 col-md-offset-4 for the layout.

Oliver Koenig () - 10 years ago - Reply 0

Hi Oliver, thanks for the comment. I am new to responsive design so could you please explain what is the other alternate to fixed div class or better way to do this?

Ali () - 10 years ago - Reply 0

Hi Ali, I'm also new to Bootstrap and responsive design. As far as to what I've seen by now, the solution seems to be to apply several classes, like this: <div class="col-xs-12 col-sm-7 col-md-6 col-lg-5">
I've used this in my own code, it works.
It means to use 12 columns in xs screen size, 7 columns in sm screen size, 6 in md, 5 in lg.
There's a 12-column layout, and the screeensizes are xs (extra small), sm (small), md (medium), lg (large).
In the Bootstrap css code is defined what exact pixel sizes they are.

Oliver Koenig () - 10 years ago - Reply 0