Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"Product Form"
Bootstrap 3.3.0 Snippet by
HashimAwalgi
3.3.0
Preview
HTML
CSS
View Full Screen
Forked from
Fork
Fork this
Parent
6.9K
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <form class="form-horizontal" action='' method="POST"> <fieldset> <div class="col-lg-12 form-group margin50"> <label class="col-lg-2" for="Name">Name</label> <div class="col-lg-4"> <input type="text" id="name" name="Name" placeholder="" class="form-control name"> </div> </div> <div class=" col-lg-12 form-group"> <label class="col-lg-2" for="ProductType">Product Type</label> <div class="col-lg-4"> <select id="productType" name="ProductType" class="form-control product-type"> <option value="0">-Select-</option> </select> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Manufacturer">Manufacturer</label> <div class="col-lg-4"> <select id="manufacturer" name="Manufacturer" class="form-control manufacturer"> <option value="0">-Select-</option> </select> <p class="help-block"><a>Manufacturer Quick Add</a></p> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Distributor">Distributor</label> <div class="col-lg-4"> <select id="distributor" name="Distributor" class="form-control distributor"> <option value="0">-Select-</option> </select> <p class="help-block"><a>Distributor Quick Add</a></p> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="SKU">SKU</label> <div class="col-lg-4"> <input type="text" id="sku" name="SKU" placeholder="" class="form-control sku"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="ManufacturerPart">Manufacturer Part</label> <div class="col-lg-4"> <input type="text" id="manufacturerPart" name="ManufacturerPart" placeholder="" class="form-control manufacturer-part"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Published">Published</label> <div class="col-lg-4"> <input type="radio" name="Published" class="input-xlarge"><span>No</span> <input type="radio" name="Published" checked class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Featured">Featured</label> <div class="col-lg-4"> <input type="radio" name="Featured" class="input-xlarge"><span>No</span> <input type="radio" name="Featured" checked class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="PageDisplay">Page Display</label> <div class="col-lg-4"> <select id="pageDisplay" name="PageDisplay" class="form-control page-display"> <option value="0">-Select-</option> </select> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="ColumnWidth">Column Width</label> <div class="col-lg-4"> <input type="text" id="columnWidth" name="ColumnWidth" placeholder="" class="form-control column-width"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="TaxClass">Tax Class</label> <div class="col-lg-4"> <select id="taxClass" name="TaxClass" class="form-control tax-class"> <option value="0">-Select-</option> </select> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="QuantityDiscountTable">Quantity Discount Table</label> <div class="col-lg-4"> <select id="quantityDiscount" name="QuantityDiscountTable" class="form-control quantity-discount"> <option value="0">-Select-</option> </select> <p class="help-block"><a>Quantity Discount Quick Add</a></p> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="ShowBuyButton">Show Buy Button</label> <div class="col-lg-4"> <input type="radio" name="ShowBuyButton" class="input-xlarge"><span>No</span> <input type="radio" name="ShowBuyButton" checked class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="RequiresRegistrationToView">Requires Registration To View</label> <div class="col-lg-4"> <input type="radio" name="RequiresRegistrationToView" checked class="input-xlarge"><span>No</span> <input type="radio" name="RequiresRegistrationToView" class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="CallToOrder">Is Call To Order</label> <div class="col-lg-4"> <input type="radio" name="CallToOrder" checked class="input-xlarge"><span>No</span> <input type="radio" name="CallToOrder" class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="HidePriceUntilCart">Hide Price Until Cart</label> <div class="col-lg-4"> <input type="radio" name="HidePriceUntilCart" checked class="input-xlarge"><span>No</span> <input type="radio" name="HidePriceUntilCart" class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="ProductFeeds">Exclude From Product Feeds</label> <div class="col-lg-4"> <input type="radio" name="ProductFeeds" checked class="input-xlarge"><span>No</span> <input type="radio" name="ProductFeeds" class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Kit">Is a Kit</label> <div class="col-lg-2"> <input type="radio" name="Kit" checked class="input-xlarge"><span>No</span> <input type="radio" name="Kit" class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Inventory">Track Inventory By Size and Color</label> <div class="col-lg-4"> <input type="radio" name="Inventory" checked class="input-xlarge"><span>No</span> <input type="radio" name="Inventory" class="input-xlarge"><span>Yes</span> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="ColorOptionPrompt">Color Option Prompt</label> <div class="col-lg-4"> <input type="text" id="colorOptionPrompt" name="ColorOptionPrompt" placeholder="" class="form-control color-option-prompt"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="SizeOptionPrompt">Size Option Prompt</label> <div class="col-lg-4"> <input type="text" id="sizeOptionPrompt" name="SizeOptionPrompt" placeholder="" class="form-control size-option-prompt"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="RequiresTextField">Requires Text Field</label> <div class="col-lg-4"> <input type="radio" name="RequiresTextField" checked class="input-xlarge"><span>No</span> <input type="radio" name="RequiresTextField" class="input-xlarge"><span>Yes</span> <p class="help-block"> <span>Field Prompt </span><input type="text" id="fieldPrompt" name="FieldPrompt" placeholder="" class="form-control field-prompt"> </p> <p class="help-block"> <span>Max Length </span><input type="text" id="maxLength" name="MaxLength" placeholder="" class="form-control max-length"> </p> </div> </div> <h3>Default Variant Information</h3> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Price">Price</label> <div class="col-lg-4"> <input type="text" id="price" name="Price" placeholder="" class="form-control price"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="SalePrice">Sale Price</label> <div class="col-lg-4"> <input type="text" id="saleprice" name="SalePrice" placeholder="" class="form-control sale-price"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Weight">Weight</label> <div class="col-lg-4"> <input type="text" id="weight" name="Weight" placeholder="" class="form-control weight"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Dimentions">Dimentions(Width x Height X Depth)</label> <div class="col-lg-10"> <div class="col-lg-3"><input type="text" id="dimentionsWidth" name="DimentionsWidth" placeholder="" class="form-control dimentions-width"> X</div> <div class="col-lg-3"><input type="text" id="dimentionsHeight" name="DimentionsHeight" placeholder="" class="form-control dimentions-height"> X</div> <div class="col-lg-3"><input type="text" id="dimentionsDepth" name="DimentionsDepth" placeholder="" class="form-control dimentions-depth"></div> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="CurrentInventory">Current Inventory</label> <div class="col-lg-4"> <input type="text" id="currentInventory" name="CurrentInventory" placeholder="" class="form-control current-inventory"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Colors">Colors</label> <div class="col-lg-4"> <input type="text" id="colors" name="Colors" placeholder="" class="form-control colors"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="ColorSKUModifier">Color SKU Modifiers</label> <div class="col-lg-4"> <input type="text" id="colorModifier" name="ColorSKUModifier" placeholder="" class="form-control color-modifier"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="Sizes">Sizes</label> <div class="col-lg-4"> <input type="text" id="sizes" name="Sizes" placeholder="" class="form-control sizes"> </div> </div> <div class="col-lg-12 form-group"> <label class="col-lg-2" for="SizeSKUModifier">Size SKU Modifiers</label> <div class="col-lg-4"> <input type="text" id="sizeModifier" name="SizeSKUModifier" placeholder="" class="form-control size-modifier"> </div> </div> </fieldset> </form>
.margin50 { margin-top:50px } .dimentions-width, .dimentions-height { width:90%; display:initial; }
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76