Example
Example block-level help text here.
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
placeholder="Enter first name"
value=""
>
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<label class="control-label" for="comment">Comment</label>
<textarea
class="form-control"
id="comment"
name="comment"
placeholder="Enter text here...."
></textarea>
</div>
Example
<div class="form-group">
<label for="title">Title</label>
<select class="form-control" id="title" name="title">
<option id="1" value="Mr" selected>Mr</option>
<option id="2" value="Mrs">Mrs</option>
<option id="3" value="Ms">Ms</option>
</select>
</div>
Example
<div class="checkbox">
<label>
<input
type="checkbox"
id="terms"
name="terms"
>
I accept the
<a href="" title="Terms and Conditions">Terms & Conditions</a>.
</label>
</div>
Example
<div class="checkbox">
<label>
<input
type="checkbox"
id="terms"
name="terms"
>
I accept the
<a href="" title="Terms and Conditions">Terms & Conditions</a>.
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="newsletter" name="newsletter">
I want to receive regular updates via email
</label>
</div>
Example
<div class="checkbox-inline">
<label>
<input type="checkbox" id="optionA" name="optionA"> Option A
</label>
</div>
<div class="checkbox-inline">
<label>
<input type="checkbox" id="optionB" name="optionB"> Option B
</label>
</div>
Example
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
Example
<div class="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one
</label>
</div>
<div class="radio-inline">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two
</label>
</div>
Example
Example block-level help text here.
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile" name="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
Example
email@example.com
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">email@example.com</p>
</div>
</div>
Example
Example block-level help text here.
Example block-level help text here.
Example block-level help text here.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2">
<p class="help-block">Example block-level help text here.</p>
<span class="icon icon-check form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2">
<p class="help-block">Example block-level help text here.</p>
<span class="icon icon-exclamation-circle form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2">
<p class="help-block">Example block-level help text here.</p>
<span class="icon icon-close form-control-feedback"></span>
</div>
Example
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="firstName">First Name</label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
placeholder="Enter first name"
value=""
>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lastName">Last Name</label>
<div class="col-sm-10">
<input
type="text"
class="form-control"
id="lastName"
name="lastName"
placeholder="Enter last name"
value=""
>
</div>
</div>
</form>4.13 #permalink Upload image, with preview
Placeholder and preview window should be replaced with the uploaded image
Example
Upload image
Upload your image.
<div class="form-group clearfix">
<div class="image-preview">
<div class="placeholder">
<p><strong>Upload image</strong></p>
</div>
</div>
<div class="image-input">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile" name="exampleInputFile">
<p class="help-block">Upload your image.</p>
</div>
</div>
Example
<div class="is-required">
<label class="control-label" for="serialNumber1">Serial Number</label>
</div>
<div class="is-required">
<div data-product-input="product" class="input-group-multi">
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber1"
name="serialNumber1"
maxlength="4"
>
</div>
<span class="input-group-multi-divider"></span>
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber2"
name="serialNumber2"
maxlength="3"
>
</div>
<span class="input-group-multi-divider"></span>
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber3"
name="serialNumber3"
maxlength="6"
>
</div>
<span class="input-group-multi-divider"></span>
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber4"
name="serialNumber4"
maxlength="10"
>
</div>
</div>
</div>4.14 #permalink Multi group input
Used in the guarantee form for a 24 character code
Example
<div class="is-required">
<label class="control-label" for="serialNumber1">Serial Number</label>
</div>
<div class="is-required">
<div data-product-input="product" class="input-group-multi">
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber1"
name="serialNumber1"
maxlength="4"
>
</div>
<span class="input-group-multi-divider"></span>
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber2"
name="serialNumber2"
maxlength="3"
>
</div>
<span class="input-group-multi-divider"></span>
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber3"
name="serialNumber3"
maxlength="6"
>
</div>
<span class="input-group-multi-divider"></span>
<div class="form-group">
<input
type="text"
class="form-control"
id="serialNumber4"
name="serialNumber4"
maxlength="10"
>
</div>
</div>
</div>
Example
<fieldset>
<legend>I Am Legend</legend>
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
placeholder="Enter first name"
value="Will Smith"
>
</div>
</fieldset>
Example
<fieldset>
<legend>I Am Legend</legend>
<div class="form-group">
<label class="control-label" for="firstName">First Name</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstName"
placeholder="Enter first name"
value="Will Smith"
>
</div>
</fieldset>