<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Content Loading via Ajax
<small>loading page content via ajax
</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
<a href="index.html">Home
</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="#"></a>
</li>
</ul>
<div class="page-toolbar">
<div class="btn-group pull-right">
<button type="button" class="btn btn-fit-height grey-salt dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true">
Actions
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">Action
</a>
</li>
<li>
<a href="#">Another action
</a>
</li>
<li>
<a href="#">Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-6">
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Default Form
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label for="exampleInputEmail1">Text
</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter text">
<span class="help-block">
A block of help text.
</span>
</div>
<div class="form-group">
<label>Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password
</label>
<div class="input-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
</div>
<div class="form-group">
<label>Left Icon
</label>
<div class="input-icon">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control" placeholder="Left icon">
</div>
</div>
<div class="form-group">
<label>Right Icon
</label>
<div class="input-icon right">
<i class="fa fa-microphone"></i>
<input type="text" class="form-control" placeholder="Right icon">
</div>
</div>
<div class="form-group">
<label>Input With Spinner
</label>
<input class="form-control spinner" type="text" placeholder="Process something"/>
</div>
<div class="form-group">
<label>Static Control
</label>
<p class="form-control-static">
email@example.com
</p>
</div>
<div class="form-group">
<label>Disabled
</label>
<input type="text" class="form-control" placeholder="Disabled" disabled>
</div>
<div class="form-group">
<label>Readonly
</label>
<input type="text" class="form-control" placeholder="Readonly" readonly>
</div>
<div class="form-group">
<label>Dropdown
</label>
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Multiple Select
</label>
<select multiple class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Textarea
</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile">File input
</label>
<input type="file" id="exampleInputFile">
<p class="help-block">
some help text here.
</p>
</div>
<div class="form-group">
<label>Checkboxes
</label>
<div class="checkbox-list">
<label>
<input type="checkbox"> Checkbox 1
</label>
<label>
<input type="checkbox"> Checkbox 2
</label>
<label>
<input type="checkbox" disabled> Disabled
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes
</label>
<div class="checkbox-list">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Checkbox 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3" disabled> Disabled
</label>
</div>
</div>
<div class="form-group">
<label>Radio
</label>
<div class="radio-list">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option 2
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option3" disabled> Disabled
</label>
</div>
</div>
<div class="form-group">
<label>Inline Radio
</label>
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn blue">Submit
</button>
<button type="button" class="btn default">Cancel
</button>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Input Groups
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body">
<h4 class="block">Checkboxe Addons
</h4>
<form role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<input type="checkbox">
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Button Addons
</h4>
<form role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn red" type="button">Go!
</button>
</span>
<input type="text" class="form-control">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn blue" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Button Addons On Both Sides
</h4>
<form role="form">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<span class="input-group-btn">
<button class="btn red" type="button">Go!
</button>
</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn blue" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</form>
<h4 class="block">Buttons With Dropdowns
</h4>
<form role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action
<i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action
<i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Buttons With Dropdowns On Both Sides
</h4>
<form role="form">
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown">Action
<i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn yellow dropdown-toggle" data-toggle="dropdown">Action
<i class="fa fa-angle-down"></i></button>
<ul class="dropdown-menu pull-right">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</form>
<h4 class="block">Segmented Buttons
</h4>
<form role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn default" tabindex="-1">Action
</button>
<button type="button" class="btn default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
<input type="text" class="form-control">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn green" tabindex="-1">Action
</button>
<button type="button" class="btn green dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Action
</a>
</li>
<li>
<a href="#">
Another action
</a>
</li>
<li>
<a href="#">
Something else here
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Separated link
</a>
</li>
</ul>
</div>
</div>
<!-- /.input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box red">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Default Form Height Sizing
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Large Input
</label>
<input type="text" class="form-control input-lg" placeholder="Large Input">
</div>
<div class="form-group">
<label>Default Input
</label>
<input type="text" class="form-control" placeholder="Default Input">
</div>
<div class="form-group">
<label>Small Input
</label>
<input type="text" class="form-control input-sm" placeholder="Small Input">
</div>
<div class="form-group">
<label>Large Select
</label>
<select class="form-control input-lg">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Default Select
</label>
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Small Select
</label>
<select class="form-control input-sm">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
</div>
<div class="col-md-6">
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box green">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Horizontal Form
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form class="form-horizontal" role="form">
<div class="form-body">
<div class="form-group">
<label class="col-lg-3 control-label">Text
</label>
<div class="col-lg-9">
<input type="text" class="form-control" placeholder="Enter text">
<span class="help-block">
A block of help text.
</span>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email Address
</label>
<div class="col-lg-9">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="email" class="form-control" placeholder="Email Address">
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Password
</label>
<div class="col-lg-9">
<div class="input-group">
<input type="password" class="form-control" placeholder="Password">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Left Icon
</label>
<div class="col-lg-9">
<div class="input-icon">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control" placeholder="Left icon">
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Right Icon
</label>
<div class="col-lg-9">
<div class="input-icon right">
<i class="fa fa-microphone"></i>
<input type="text" class="form-control" placeholder="Right icon">
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Input With Spinner
</label>
<div class="col-lg-9">
<input type="password" class="form-control spinner" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Static Control
</label>
<div class="col-lg-9">
<p class="form-control-static">
email@example.com
</p>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Disabled
</label>
<div class="col-lg-9">
<input type="password" class="form-control" placeholder="Disabled" disabled>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Readonly
</label>
<div class="col-lg-9">
<input type="password" class="form-control" placeholder="Readonly" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Dropdown
</label>
<div class="col-lg-9">
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Multiple Select
</label>
<div class="col-lg-9">
<select multiple class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Textarea
</label>
<div class="col-lg-9">
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-lg-3 control-label">File input
</label>
<div class="col-lg-9">
<input type="file" id="exampleInputFile">
<p class="help-block">
some help text here.
</p>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Checkboxes
</label>
<div class="col-lg-9">
<div class="checkbox-list">
<label>
<input type="checkbox"> Checkbox 1
</label>
<label>
<input type="checkbox"> Checkbox 1
</label>
<label>
<input type="checkbox" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Inline Checkboxes
</label>
<div class="col-lg-9">
<div class="checkbox-list">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Checkbox 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Checkbox 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Radio
</label>
<div class="col-lg-9">
<div class="radio-list">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked> Option 2
</label>
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" disabled> Disabled
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Inline Radio
</label>
<div class="col-lg-9">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option 1
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" checked> Option 2
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Disabled
</label>
</div>
</div>
</div>
</div>
<div class="form-actions fluid">
<div class="col-lg-offset-3 col-lg-9">
<button type="submit" class="btn green">Submit
</button>
<button type="button" class="btn default">Cancel
</button>
</div>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<!-- BEGIN SAMPLE FORM PORTLET-->
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Horizontal Form Height Sizing
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form class="form-horizontal" role="form">
<div class="form-body">
<div class="form-group">
<label class="col-lg-3 control-label">Large Input
</label>
<div class="col-lg-9">
<input type="text" class="form-control input-lg" placeholder="Large Input">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Default Input
</label>
<div class="col-lg-9">
<input type="text" class="form-control" placeholder="Default Input">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Small Input
</label>
<div class="col-lg-9">
<input type="text" class="form-control input-sm" placeholder="Default Input">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Large Select
</label>
<div class="col-lg-9">
<select class="form-control input-lg">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Default Select
</label>
<div class="col-lg-9">
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Small Select
</label>
<div class="col-lg-9">
<select class="form-control input-sm">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
<!-- END SAMPLE FORM PORTLET-->
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Validation States
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success
</label>
<input type="text" class="form-control" id="inputSuccess">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning
</label>
<input type="text" class="form-control" id="inputWarning">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error
</label>
<input type="text" class="form-control" id="inputError">
</div>
</div>
<div class="form-actions">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn red">Submit
</button>
</div>
</form>
</div>
</div>
<div class="portlet box yellow">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Validation States With Icons
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label class="control-label" for="inputSuccess">Default input
</label>
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Email address"></i>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group has-success">
<label class="control-label" for="inputSuccess">Input with success
</label>
<div class="input-icon right">
<i class="fa fa-check tooltips" data-original-title="You look OK!"></i>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning">Input with warning
</label>
<div class="input-icon right">
<i class="fa fa-warning tooltips" data-original-title="please provide an email"></i>
<input type="text" class="form-control">
</div>
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError">Input with error
</label>
<div class="input-icon right">
<i class="fa fa-exclamation tooltips" data-original-title="please write a valid email"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
<div class="portlet box purple">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i> Horizontal Form Validation States
</div>
<div class="tools">
<a href="" class="collapse">
</a>
<a href="#portlet-config" data-toggle="modal" class="config">
</a>
<a href="" class="reload">
</a>
<a href="" class="remove">
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="col-lg-3 control-label" for="inputSuccess">Default input
</label>
<div class="col-lg-9">
<div class="input-icon right">
<i class="fa fa-info-circle tooltips" data-original-title="Email address"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group has-success">
<label class="col-lg-3 control-label" for="inputSuccess">Input with success
</label>
<div class="col-lg-9">
<div class="input-icon right">
<i class="fa fa-check tooltips" data-original-title="You look OK!"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group has-warning">
<label class="col-lg-3 control-label" for="inputWarning">Input with warning
</label>
<div class="col-lg-9">
<div class="input-icon right">
<i class="fa fa-warning tooltips" data-original-title="please provide an email"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group has-error">
<label class="col-lg-3 control-label" for="inputError">Input with error
</label>
<div class="col-lg-9">
<div class="input-icon right">
<i class="fa fa-exclamation tooltips" data-original-title="please write a valid email"></i>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
<div class="form-actions fluid">
<div class="col-lg-offset-3 col-lg-9">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn blue">Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
<script></script>