<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form><form>
<div class="form-group">
<label for="exampleInputEmail1" class="control-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group has-error">
<label for="exampleInputPassword1" class="control-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<ng-messages>
<ng-message>Password is required</ng-message>
</ng-messages>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form><form>
<div class="beneficiary-section beneficiary-section-select">
<div class="row">
<fieldset>
<div class="col-sm-1 icon-container">
<span class="em-user-icon"></span>
</div>
<div class="col-xs-12 col-sm-6">
<label for="maritalStatus" class="control-label">
Are you married?
</label>
</div>
<div class="col-xs-12 col-sm-5 text-right toggle-container">
<div class="btn-group" data-toggle="buttons">
<label for="maritalStatusMarried" class="btn btn-toggle active">
<input type="radio" name="maritalStatus" id="maritalStatusMarried"/>
<span>Yes</span>
</label>
<label for="maritalStatusSingle" class="btn btn-toggle">
<input type="radio" name="maritalStatus" id="maritalStatusSingle"/>
<span>No</span>
</label>
</div><!--//btn-broup//-->
</div><!--//toggle-container//-->
</fieldset>
</div><!--//row//-->
</div><!--//beneficiary-section//-->
<div class="beneficiary-section beneficiary-section-select">
<div class="row">
<fieldset>
<div class="col-sm-1 icon-container">
<span class="em-beneficiary-type-icon"></span>
</div>
<div class="col-xs-12 col-sm-6">
<label for="beneficiaryDesignation" class="control-label">
Beneficiary Type
</label>
</div>
<div class="col-xs-12 col-sm-5 text-right">
<div class="toggle-container">
<div class="btn-group" data-toggle="buttons">
<label for="beneficiaryDesignationPrimary" class="btn btn-toggle active">
<input type="radio" name="beneficiaryDesignation" id="beneficiaryDesignationPrimary" />
<span>Primary</span>
</label>
<label for="beneficiaryDesignationContingent" class="btn btn-toggle">
<input type="radio" name="beneficiaryDesignation" id="beneficiaryDesignationContingent" />
<span>Contingent</span>
</label>
</div><!--//btn-group//-->
</div><!--//toggle-container//-->
</div>
</fieldset>
</div><!--//row//-->
</div><!--//beneficiary-section//-->
<div class="beneficiary-section beneficiary-section-select">
<div class="form-group clearfix">
<div class="row">
<div class="col-sm-1 icon-container">
<span class="em-checkbox-icon"></span>
</div>
<div class="col-xs-12 col-sm-6">
<label for="beneficiaryType" class="control-label">
My beneficiary is
</label>
</div>
<div class="col-xs-12 col-sm-5 col-sm-offset-0">
<div class="custom-select form-control">
<select name="beneficiaryType" id="beneficiaryType" class="form-control">
<option value=""></option>
<optgroup label="An Individual">
<option value="IND:SPS" selected="selected">My Spouse</option>
<option value="IND:DPR">My Domestic Partner</option>
<option value="IND:CHD">My Child</option>
<option value="IND:SIB">My Sibling</option>
</optgroup>
<option value="EST">An Estate</option>
<option value="TRU">A Trust</option>
<option value="OTH">Other</option>
</select>
</div>
</div>
</div><!--//row//-->
</div><!--//form-group//-->
</div><!--//beneficiary-section//-->
<div class="beneficiary-section">
<div class="row">
<div class="col-sm-1 icon-container">
<span class="em-id-card-icon"></span>
</div>
<div class="col-xs-12 col-sm-6 bene-type-header">
<span>My Spouse</span>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-11 col-sm-offset-1">
<div class="beneficiary-form-container">
<div class="row">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="beneficiaryFirstName" class="control-label">
First
</label>
<input type="text" name="beneficiaryFirstName" id="beneficiaryFirstName" class="form-control" />
</div><!--//form-group//-->
</div>
<div class="col-sm-2 col-md-2 col-lg-2">
<div class="form-group">
<label for="beneficiaryMiddleName" class="control-label">
Middle
</label>
<input type="text" name="beneficiaryMiddleName" id="beneficiaryMiddleName" class="form-control" />
</div><!--//form-group//-->
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="beneficiaryLastName" class="control-label">
Last
</label>
<input type="text" name="beneficiaryLastName" id="beneficiaryLastName" class="form-control" />
</div><!--//form-group//-->
</div>
<div class="col-sm-2 col-md-2 col-lg-2">
<div class="form-group">
<label for="state" class="control-label">
Suffix
</label>
<input type="text" name="beneficiarySuffix" id="beneficiarySuffix" class="form-control" />
</div><!--//form-group//-->
</div>
</div><!--//row//-->
<div class="row">
<div class="col-sm-4 col-lg-4">
<div class="form-group">
<label for="dateOfBirth" class="control-label">
Date of Birth
</label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<input type="text" inputmode="numeric" pattern="[0-9]*" name="dateOfBirth" id="dateOfBirth" class="form-control" />
</div>
</div>
</div><!--//form-group//-->
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="socialSecurityNumber"class="control-label">
Social Security Number
</label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<input type="text" inputmode="numeric" pattern="[0-9]*" name="socialSecurityNumber" id="socialSecurityNumber" class="form-control" />
</div>
</div>
</div><!--//form-group//-->
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="phoneNumber" class="control-label">
Phone Number
</label>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<input type="tel" name="phoneNumber" id="phoneNumber" class="form-control" />
</div>
</div>
</div><!--//form-group//-->
</div>
</div><!--//row//-->
</div>
</div>
</div>
</div><!--//bene-section//-->
</form><!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Standard button with gradient -->
<button type="button" class="btn btn-default with-gradient">Default</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
<!-- Loading spinner on disabled button -->
<button type="button" class="btn btn-loader" data-fired="Loading Text" disabled="disabled">
<span>
Loader
</span>
</button>
These buttons use the .reset-padding class to remove the min-width.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
<p>These buttons use the <code>.reset-padding</code> class to remove the min-width.</p>
<p>
<button type="button" class="btn btn-primary reset-padding">Button</button>
<button type="button" class="btn btn-default reset-padding">Button</button>
</p><div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div><label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>A stand alone field
This is a field with a label
This is a field with a simple message
This is a field with an error message
This is a percentage field
This is a percentage field with a button
<p>A stand alone field</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Text input">
</div>
<hr />
<p>This is a field with a label</p>
<div class="form-group">
<label for="exampleInputEmail1" class="control-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<hr />
<p>This is a field with a simple message</p>
<div class="form-group">
<label for="exampleInputEmail1" class="control-label">Password</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="">
<ng-messages>
<ng-message>Password is required</ng-message>
</ng-messages>
</div>
<hr />
<p>This is a field with an error message</p>
<div class="form-group has-error">
<label for="exampleInputPassword1" class="control-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<ng-messages>
<ng-message>Password is required</ng-message>
</ng-messages>
</div>
<p>This is a percentage field</p>
<div class="input-group input-group-sm input-group-percentage">
<input type="text"
name="BeneficiaryAllocationPercent"
id="BeneficiaryAllocationPercent"
class="form-control"
ng-model="beneficiary.allocationPercent"
ng-model-options="{ updateOn: 'blur', allowInvalid: true }"
required />
<span class="input-group-addon">%</span>
</div>
<p>This is a percentage field with a button</p>
<div class="input-group input-group-sm input-group-percentage">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="em-lock-bold"></span></button>
</span>
<input type="text"
name="BeneficiaryAllocationPercent"
id="BeneficiaryAllocationPercent"
class="form-control"
ng-model="beneficiary.allocationPercent"
ng-model-options="{ updateOn: 'blur', allowInvalid: true }"
required />
<span class="input-group-addon">%</span>
</div><form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" value="Disabled input" disabled>
</div>
<div class="form-group">
<label for="readonlyTextInput">Read Only input</label>
<input type="text" id="readonlyTextInput" class="form-control" value="Read Only input" readonly>
</div>
<div class="checkbox">
<label>
<input type="checkbox" disabled> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form><input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state"><div class="form-group">
<label for="password">Password</label>
<a class="pull-right hide-password" href="#">Hide Password</a>
<input type="text" class="form-control" id="password" name="password" placeholder="Password">
<div class="form-rules clearfix margin-top-default" style="display: block;">
<ul class="help-block list-unstyled">
<li>
<span class="rule-list-image" id="8-characters">●</span>
<span class="rule">At least eight characters</span>
</li>
<li>
<span class="rule-list-image" id="uppercase">●</span>
<span class="rule">At least one uppercase letter</span>
</li>
<li>
<span class="rule-list-image" id="special">●</span>
<span class="rule">At least two special characters</span>
</li>
</ul>
<p class="col-md-9 success hidden">Strong Password</p>
</div>
</div><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>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div><label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label><select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select><div class="btn-group" data-toggle="buttons">
<!-- ngRepeat: status in data.maritalStatuses --><label for="maritalStatusM" class="btn ng-scope btn-toggle" ng-repeat="status in data.maritalStatuses" ng-class="status.code === data.maritalStatus ? 'btn-toggle active' : 'btn-toggle'">
<input type="radio" name="maritalStatus" id="maritalStatusM" ng-model="data.maritalStatus" ng-value="status.code" ng-change="form.maritalStatusChanged();" required="" marital-status="" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-marital-status-invalid" value="M">
<!-- ngIf: status.code === form.maritalStatuses.Married --><span ng-if="status.code === form.maritalStatuses.Married" class="ng-binding ng-scope">Yes</span><!-- end ngIf: status.code === form.maritalStatuses.Married -->
<!-- ngIf: status.code != form.maritalStatuses.Married -->
</label><!-- end ngRepeat: status in data.maritalStatuses --><label for="maritalStatusS" class="btn ng-scope btn-toggle" ng-repeat="status in data.maritalStatuses" ng-class="status.code === data.maritalStatus ? 'btn-toggle active' : 'btn-toggle'">
<input type="radio" name="maritalStatus" id="maritalStatusS" ng-model="data.maritalStatus" ng-value="status.code" ng-change="form.maritalStatusChanged();" required="" marital-status="" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-marital-status-invalid" value="S">
<!-- ngIf: status.code === form.maritalStatuses.Married -->
<!-- ngIf: status.code != form.maritalStatuses.Married --><span ng-if="status.code != form.maritalStatuses.Married" class="ng-binding ng-scope">No</span><!-- end ngIf: status.code != form.maritalStatuses.Married -->
</label><!-- end ngRepeat: status in data.maritalStatuses -->
</div><div class="btn-group" data-toggle="buttons">
<!-- ngRepeat: status in data.maritalStatuses --><label for="maritalStatusM" class="btn ng-scope btn-toggle active">
<input type="radio" name="maritalStatus" id="maritalStatusM" ng-model="data.maritalStatus" ng-value="status.code" ng-change="form.maritalStatusChanged();" required="" marital-status="" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-marital-status-invalid" value="M">
<!-- ngIf: status.code === form.maritalStatuses.Married --><span ng-if="status.code === form.maritalStatuses.Married" class="ng-binding ng-scope">Yes</span><!-- end ngIf: status.code === form.maritalStatuses.Married -->
<!-- ngIf: status.code != form.maritalStatuses.Married -->
</label><!-- end ngRepeat: status in data.maritalStatuses --><label for="maritalStatusS" class="btn ng-scope btn-toggle" ng-repeat="status in data.maritalStatuses" ng-class="status.code === data.maritalStatus ? 'btn-toggle active' : 'btn-toggle'">
<input type="radio" name="maritalStatus" id="maritalStatusS" ng-model="data.maritalStatus" ng-value="status.code" ng-change="form.maritalStatusChanged();" required="" marital-status="" class="ng-pristine ng-untouched ng-invalid ng-invalid-required ng-valid-marital-status-invalid" value="S">
<!-- ngIf: status.code === form.maritalStatuses.Married -->
<!-- ngIf: status.code != form.maritalStatuses.Married --><span ng-if="status.code != form.maritalStatuses.Married" class="ng-binding ng-scope">No</span><!-- end ngIf: status.code != form.maritalStatuses.Married -->
</label><!-- end ngRepeat: status in data.maritalStatuses -->
</div>