Bootstrap snippet: Form register inside narrow jumbotron

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: form,user,register

<link href="" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="//"> <div class="container bootstrap snippet"> <div class="header"> <ul class="nav nav-pills pull-right"> <li ><a href="">Home</a></li> <li class="active"><a href="">Register</a></li> <li><a href="">About</a></li> </ul> <h3 class="text-muted prj-name">Project name</h3> </div> <div class="jumbotron text-center" style="min-height:400px;height:auto;"> <div class="col-md-10 col-md-offset-2"> <form class="form-horizontal" role="form"> <div class="form-group text-center"> <div class="col-sm-10 reg-icon"> <span class="fa fa-user fa-3x">Register</span> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input type="text" class="form-control" id="name" placeholder="Name"> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input type="email" class="form-control" id="Username" placeholder="Username"> </div> </div> <div class="form-group"> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-10"> <button type="submit" class="btn btn-info"> <span class="glyphicon glyphicon-share-alt"></span> Register </button> </div> </div> </form> </div> </div> </div>
.jumbotron label { font-size:12px; } .reg-icon{ color:#5bc0de; font-weight:bold; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4) !important; } .nav-pills>>a, .nav-pills>>a:hover, .nav-pills>>a:focus { color: #fff; background-color: #5bc0de; } .prj-name{ font-weight:bold; color:#5bc0de; }

Form register inside narrow jumbotron

  Jul 7th 2014, 18:17