Created
November 6, 2013 02:07
-
-
Save bMinaise/7329768 to your computer and use it in GitHub Desktop.
Bootstrap Form Examples
From http://bootsnipp.com/snippets/featured/sign-up
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
CSS STYLES: | |
body { padding-top:30px; } | |
.form-control { margin-bottom: 10px; } | |
--> | |
<!-- User Sign-up Form --> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-xs-12 col-sm-12 col-md-4 well well-sm"> | |
<legend><a href="http://www.jquery2dotnet.com"><i class="glyphicon glyphicon-globe"></i></a> Sign up!</legend> | |
<form action="#" method="post" class="form" role="form"> | |
<div class="row"> | |
<div class="col-xs-6 col-md-6"> | |
<input class="form-control" name="firstname" placeholder="First Name" type="text" | |
required autofocus /> | |
</div> | |
<div class="col-xs-6 col-md-6"> | |
<input class="form-control" name="lastname" placeholder="Last Name" type="text" required /> | |
</div> | |
</div> | |
<input class="form-control" name="youremail" placeholder="Your Email" type="email" /> | |
<input class="form-control" name="reenteremail" placeholder="Re-enter Email" type="email" /> | |
<input class="form-control" name="password" placeholder="New Password" type="password" /> | |
<label for=""> | |
Birth Date</label> | |
<div class="row"> | |
<div class="col-xs-4 col-md-4"> | |
<select class="form-control"> | |
<option value="Month">Month</option> | |
</select> | |
</div> | |
<div class="col-xs-4 col-md-4"> | |
<select class="form-control"> | |
<option value="Day">Day</option> | |
</select> | |
</div> | |
<div class="col-xs-4 col-md-4"> | |
<select class="form-control"> | |
<option value="Year">Year</option> | |
</select> | |
</div> | |
</div> | |
<label class="radio-inline"> | |
<input type="radio" name="sex" id="inlineCheckbox1" value="male" /> | |
Male | |
</label> | |
<label class="radio-inline"> | |
<input type="radio" name="sex" id="inlineCheckbox2" value="female" /> | |
Female | |
</label> | |
<br /> | |
<br /> | |
<button class="btn btn-lg btn-primary btn-block" type="submit"> | |
Sign up</button> | |
</form> | |
</div> | |
</div> | |
</div> | |
<!-- Shopping Cart Form --> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-12 col-md-10 col-md-offset-1"> | |
<table class="table table-hover"> | |
<thead> | |
<tr> | |
<th>Product</th> | |
<th>Quantity</th> | |
<th class="text-center">Price</th> | |
<th class="text-center">Total</th> | |
<th> </th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td class="col-sm-8 col-md-6"> | |
<div class="media"> | |
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a> | |
<div class="media-body"> | |
<h4 class="media-heading"><a href="#">Product name</a></h4> | |
<h5 class="media-heading"> by <a href="#">Brand name</a></h5> | |
<span>Status: </span><span class="text-success"><strong>In Stock</strong></span> | |
</div> | |
</div></td> | |
<td class="col-sm-1 col-md-1" style="text-align: center"> | |
<input type="email" class="form-control" id="exampleInputEmail1" value="3"> | |
</td> | |
<td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td> | |
<td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td> | |
<td class="col-sm-1 col-md-1"> | |
<button type="button" class="btn btn-danger"> | |
<span class="glyphicon glyphicon-remove"></span> Remove | |
</button></td> | |
</tr> | |
<tr> | |
<td class="col-md-6"> | |
<div class="media"> | |
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a> | |
<div class="media-body"> | |
<h4 class="media-heading"><a href="#">Product name</a></h4> | |
<h5 class="media-heading"> by <a href="#">Brand name</a></h5> | |
<span>Status: </span><span class="text-warning"><strong>Leaves warehouse in 2 - 3 weeks</strong></span> | |
</div> | |
</div></td> | |
<td class="col-md-1" style="text-align: center"> | |
<input type="email" class="form-control" id="exampleInputEmail1" value="2"> | |
</td> | |
<td class="col-md-1 text-center"><strong>$4.99</strong></td> | |
<td class="col-md-1 text-center"><strong>$9.98</strong></td> | |
<td class="col-md-1"> | |
<button type="button" class="btn btn-danger"> | |
<span class="glyphicon glyphicon-remove"></span> Remove | |
</button></td> | |
</tr> | |
<tr> | |
<td> </td> | |
<td> </td> | |
<td> </td> | |
<td><h5>Subtotal</h5></td> | |
<td class="text-right"><h5><strong>$24.59</strong></h5></td> | |
</tr> | |
<tr> | |
<td> </td> | |
<td> </td> | |
<td> </td> | |
<td><h5>Estimated shipping</h5></td> | |
<td class="text-right"><h5><strong>$6.94</strong></h5></td> | |
</tr> | |
<tr> | |
<td> </td> | |
<td> </td> | |
<td> </td> | |
<td><h3>Total</h3></td> | |
<td class="text-right"><h3><strong>$31.53</strong></h3></td> | |
</tr> | |
<tr> | |
<td> </td> | |
<td> </td> | |
<td> </td> | |
<td> | |
<button type="button" class="btn btn-default"> | |
<span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping | |
</button></td> | |
<td> | |
<button type="button" class="btn btn-success"> | |
Checkout <span class="glyphicon glyphicon-play"></span> | |
</button></td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://bbbootstrap.com/tags/login