Bootstrap snippet: Form sign in 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,sign in

<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 ><a href="">Register</a></li> <li class="active"><a href="">Sign in</a></li> </ul> <h3 class="text-muted prj-name">Project name</h3> </div> <div class="jumbotron" style="height:auto;min-height:300px;"> <div class="col-md-4"> <img src="" class="img-responsive center-block img-user"> </div> <div class="col-md-6 form-content"> <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-2x">Sign in</span> </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> Sing in </button> </div> </div> </form> </div> </div> </div>
.img-user{ width:350px; height:200px; } .jumbotron label { font-size:12px; } .reg-icon{ color:#5bc0de; font-weight:bold; } .nav-pills>>a, .nav-pills>>a:hover, .nav-pills>>a:focus { color: #fff; background-color: #5bc0de; } .prj-name{ font-weight:bold; color:#5bc0de; }

Form sign in inside narrow jumbotron

  Jul 16th 2014, 12:21