In this page you can find some info onhow create the bootstrap layout for the fields you need validate with this extension.
For each form field the extension search a parent div or a paret TD with a class that start with "col-" and add the helpblock and the feedback div if not esists.
Layout with bootstrap row:<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtName" class="control-label">Name</label>
<input type="text" class="form-control" id="txtName" placeholder="Name" >
</div>
</div>
The extension add the helpblock and the feedback div like this example (in red the added elements)
But in case you need your own graphic you can add yourselfe this elements and the extension find them and don't add the new one.
<div class="row">
<div class="form-group
has-feedback col-xs-12 col-sm-6">
<label for="txtName" class="control-label">Name</label>
<input type="text" class="form-control" id="txtName" placeholder="Name" >
<span style="z-index: 1000000;" aria-hidden="true" class="form-control-feedback glyphicon glyphicon-remove"></span>
<div class="help-block with-errors">
<ul class="list-unstyled">
<li>Here your error message</li>
</ul>
</div>
</div>
</div>
Layout with Bootstrap table
<tr>
<td class="form-group col-xs-12 col-sm-6">
<label for="txtName" class="control-label">Name</label>
<input type="text" class="form-control" id="txtName" placeholder="Name" >
</td>
</tr>
Layout with bootstrap row and add-on:<div class="row">
<div class="form-group col-xs-12 col-sm-6">
<label for="txtMail" class="control-label">Mail</label>
<div class="input-group">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="txtMail" placeholder="Mail" >
</div>
</div>
</div>
