"Product Form"
Bootstrap 3.3.0 Snippet by HashimAwalgi

<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; }

Related: See More


Questions / Comments: