<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 ----------> <div id="build"> <form id="target" class="form-horizontal"> <fieldset><div class="component" data-content="<form role="form"> <div class="form-group"> <label class="col-md-12 control-label"> Form Name </label> <div class="col-md-10"> <input class='form-control field' data-type="input" type='text' name='name' id='name' value ='Elegir servicios' /> </div> </div> <hr/> <button id="save" class='btn btn-info col-md-4'>Save</button>&nbsp;<button id="cancel" class='btn btn-danger'>Cancel</button> </form> " data-title="Form Name" data-trigger="manual" data-html="true" data-original-title="" title=""><!-- Form Name --> <legend>Elegir servicios</legend> </div><div class="popover fade left in" style="top: 12px; left: -255px; display: block;"><div class="arrow"></div><h3 class="popover-title">Form Name</h3><div class="popover-content"><form role="form"> <div class="form-group"> <label class="col-md-12 control-label"> Form Name </label> <div class="col-md-10"> <input class="form-control field" data-type="input" type="text" name="name" id="name" value="Elegir servicios"> </div> </div> <hr> <button id="save" class="btn btn-info col-md-4">Save</button> <button id="cancel" class="btn btn-danger">Cancel</button> </form> </div></div><div class="component" data-content="<form role="form"> <div class="form-group"> <label class="col-md-12 control-label"> Group Name </label> <div class="col-md-10"> <input class='form-control field' data-type="input" type='text' name='name' id='name' value ='servicios' /> </div> </div><div class="form-group"> <label class="col-md-12 control-label"> Label Text </label> <div class="col-md-10"> <input class='form-control field' data-type="input" type='text' name='label' id='label' value ='Servicios disponibles' /> </div> </div><div class="form-group"> <label class="col-md-12 control-label"> Checkboxes </label> <div class="col-md-10"> <textarea class="form-control field" data-type="textarea-split" id='checkboxes'>Corte Cepillado</textarea> </div> </div><div class="form-group"> <label class="col-md-12 control-label"> Checkboxes Values </label> <div class="col-md-10"> <textarea class="form-control field" data-type="textarea-split" id='checkboxesValues'>1 2</textarea> </div> </div> <hr/> <button id="save" class='btn btn-info col-md-4'>Save</button>&nbsp;<button id="cancel" class='btn btn-danger'>Cancel</button> </form> " data-title="Multiple Checkboxes" data-trigger="manual" data-html="true"><!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="servicios">Servicios disponibles</label> <div class="col-md-4"> <div class="checkbox"> <label for="servicios-0"> <input type="checkbox" name="servicios" id="servicios-0" value="1"> Corte </label> </div> <div class="checkbox"> <label for="servicios-1"> <input type="checkbox" name="servicios" id="servicios-1" value="2"> Cepillado </label> </div> </div> </div> </div><div class="component" data-content="<form role="form"> <div class="form-group"> <label class="col-md-12 control-label"> ID / Name </label> <div class="col-md-10"> <input class='form-control field' data-type="input" type='text' name='id' id='id' value ='btn_buscar' /> </div> </div><div class="form-group"> <label class="col-md-12 control-label"> Label Text </label> <div class="col-md-10"> <input class='form-control field' data-type="input" type='text' name='label' id='label' value ='' /> </div> </div><div class="form-group"> <label class="col-md-12 control-label"> Button Label </label> <div class="col-md-10"> <input class='form-control field' data-type="input" type='text' name='buttonlabel' id='buttonlabel' value ='Buscar' /> </div> </div><div class="form-group"> <label class='col-md-4 control-label'> Button Type </label> <div class="col-md-5"> <select class="form-control field" data-type="select" id='buttontype'> <option value="btn-default" >Default</option> <option value="btn-primary" >Primary</option> <option value="btn-info" >Info</option> <option value="btn-success" selected >Success</option> <option value="btn-warning" >Warning</option> <option value="btn-danger" >Danger</option> <option value="btn-inverse" >Inverse</option> </select> </div> </div> <hr/> <button id="save" class='btn btn-info col-md-4'>Save</button>&nbsp;<button id="cancel" class='btn btn-danger'>Cancel</button> </form> " data-title="Single Button" data-trigger="manual" data-html="true"><!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="btn_buscar"></label> <div class="col-md-4"> <button id="btn_buscar" name="btn_buscar" class="btn btn-success">Buscar</button> </div> </div> </div></fieldset></form> </div>