Hi Dmitry,
Attached are 2 screenshots: a sample VFP form and its Bootstrap HTML rendered by FoxInCloud;
You may find similarities with your case.
HTML is below (FoxInCloud adds its own, non-bootstrap CSS classes; just disregard them):
<!-- Généré le 03/08/2017 19:07:02 en 2,0 secs. par FoxInCloud version 2.25.0-beta.6 du 18/07/2017 16:08:49 /-->
<div id="div_scx" class="div_scx bootstrap" style="position:relative;">
<span id="div_scx-waitpic" class="fa fa-2x fa-spinner fa-pulse" aria-hidden="true" style="position:absolute;display:none;">
</span>
<nav class="navbar navbar-default navbar-tabs">
<ul id="div_scx-pageframe1_tabs" class="nav nav-tabs" role="tablist">
<li role="presentation" id="div_scx-pageframe1-page1_tab" class="active" >
<a role="tab" data-toggle="tab" href="#div_scx-pageframe1-page1">ETAT-CIVIL</a>
</li>
<li role="presentation" id="div_scx-pageframe1-page3_tab" class="" >
<a role="tab" data-toggle="tab" href="#div_scx-pageframe1-page3">2) ETAT-CIVIL (SUITE)</a>
</li>
<li role="presentation" id="div_scx-pageframe1-page2_tab" class="etatciv-archives" disabled >
<a role="tab" data-toggle="tab" disabled href="#div_scx-pageframe1-page2"></a>
</li>
</ul>
</nav>
<div class="tab-content">
<div id="div_scx-pageframe1-page1" class="div_scx-pageframe1-page1 tab-pane active" role="tabpanel">
<div class="container-fluid">
<fieldset class="row">
<div class="form-group awBSgrp010 p002">
<div class="form-inline awBSgrp010 p002">
<select id="div_scx-pageframe1-page1-genre1" class="div_scx-pageframe1-page1-genre1 form-control awBS-NGmember" tabindex="34" size="1" autocomplete="off">
<option>Monsieur</option>
<option>Madame</option>
</select>
<input type="text" id="div_scx-pageframe1-page1-txtnom35" class="div_scx-pageframe1-page1-txtnom35 form-control awBS-NGmember" title="Nom patronymique" tabindex="35" autocomplete="off" placeholder="Nom patronymique">
<div class="text-left form-group awBSgrp-prenom1">
<label id="div_scx-pageframe1-page1-lblprenom" class="div_scx-pageframe1-page1-lblprenom control-label awBS-NGmember">Prénom
</label>
<input type="text" id="div_scx-pageframe1-page1-prenom1" class="div_scx-pageframe1-page1-prenom1 form-control awBS-NGmember" title="Prénom usuel" tabindex="36" autocomplete="off" placeholder="Prénom usuel">
</div>
</div>
</div>
<div class="form-horizontal awBSgrp-prenoms1 p003">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-lblprenoms" class="div_scx-pageframe1-page1-lblprenoms control-label col-sm-2">Prénoms
</label>
<div class="col-sm-10">
<input type="text" id="div_scx-pageframe1-page1-prenoms1" class="div_scx-pageframe1-page1-prenoms1 form-control" title="Autres prénoms" tabindex="37" autocomplete="off" placeholder="Autres prénoms">
</div>
</div>
</div>
<div class="form-horizontal awBSgrp-txtprofes38 p004">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-lblprofessi4" class="div_scx-pageframe1-page1-lblprofessi4 control-label col-sm-2">Profession
</label>
<div class="col-sm-10">
<input type="text" id="div_scx-pageframe1-page1-txtprofes38" class="div_scx-pageframe1-page1-txtprofes38 form-control" tabindex="38" autocomplete="off" placeholder="Profession">
</div>
</div>
</div>
<div class="form-horizontal awBSgrp005 p005">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-lbldate10" class="div_scx-pageframe1-page1-lbldate10 control-label col-sm-2">Naissance
</label>
<div class="col-sm-10">
<div class="form-inline awBSgrp012">
<input type="date" id="div_scx-pageframe1-page1-datenaiss1" class="div_scx-pageframe1-page1-datenaiss1 awDate form-control awBS-NGmember" tabindex="39" autocomplete="off" placeholder="Naissance" value=" / /">
<div class="text-left form-group awBSgrp-lieunaiss">
<label id="div_scx-pageframe1-page1-lbllieu_de_11" class="div_scx-pageframe1-page1-lbllieu_de_11 control-label awBS-NGmember">Lieu
</label>
<input type="text" id="div_scx-pageframe1-page1-lieunaiss" class="div_scx-pageframe1-page1-lieunaiss form-control awBS-NGmember" title="Commune ou code postal" tabindex="40" autocomplete="off" placeholder="Commune ou code postal">
</div>
<div class="text-left form-group awBSgrp-nation">
<label id="div_scx-pageframe1-page1-label1" class="div_scx-pageframe1-page1-label1 control-label awBS-NGmember">Nationalité
</label>
<input type="text" id="div_scx-pageframe1-page1-nation" class="div_scx-pageframe1-page1-nation form-control awBS-NGmember" tabindex="41" autocomplete="on" placeholder="Nationalité">
</div>
</div>
</div>
</div>
</div>
<div id="div_scx-pageframe1-page1-testament1" class="div_scx-pageframe1-page1-testament1" style="display:none;">
<div class="form-horizontal awBSgrp001 p001">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-testament1-lbltestamen34" class="div_scx-pageframe1-page1-testament1-lbltestamen34 control-label col-sm-1">Testament
</label>
<div class="col-sm-9">
<div class="form-inline awBSgrp-cbotestament42">
<select id="div_scx-pageframe1-page1-testament1-cbotestament42" class="div_scx-pageframe1-page1-testament1-cbotestament42 form-control awBS-NGmember" tabindex="43" size="1" autocomplete="off">
<option selected="selected"> </option>
<option disabled>Authentique</option>
<option disabled>Olographe</option>
<option disabled>Mystique</option>
</select>
<input type="date" id="div_scx-pageframe1-page1-testament1-txtdatetest43" class="div_scx-pageframe1-page1-testament1-txtdatetest43 awDate form-control awBS-NGmember" title="Date du testament" tabindex="44" autocomplete="off" placeholder="Date du testament" value=" / /">
</div>
</div>
</div>
</div>
</div>
<div class="checkbox" id="div_scx-pageframe1-page1-check1_div">
<label for="div_scx-pageframe1-page1-check1" id="div_scx-pageframe1-page1-check1_lbl" class="div_scx-pageframe1-page1-check1 standard ChkOptLabel">
<input type="checkbox" id="div_scx-pageframe1-page1-check1" class="div_scx-pageframe1-page1-check1 standard" tabindex="53" size="2" autocomplete="off">PACS
</label>
</div>
<div class="checkbox" id="div_scx-pageframe1-page1-decesliq1_div">
<label for="div_scx-pageframe1-page1-decesliq1" id="div_scx-pageframe1-page1-decesliq1_lbl" class="div_scx-pageframe1-page1-decesliq1 standard ChkOptLabel" style="display:none;">
<input type="checkbox" id="div_scx-pageframe1-page1-decesliq1" class="div_scx-pageframe1-page1-decesliq1 standard" style="display:none;" tabindex="55" size="2" autocomplete="off">Décédé(e)
</label>
</div>
<div class="text-left form-group awBSgrp009 p009">
<label id="div_scx-pageframe1-page1-lblex_conjo28" class="div_scx-pageframe1-page1-lblex_conjo28 control-label">Ex conjoint
</label>
<div class="form-inline awBSgrp011">
<select id="div_scx-pageframe1-page1-genre2" class="div_scx-pageframe1-page1-genre2 form-control awBS-NGmember" tabindex="56" size="1" autocomplete="off">
<option>Monsieur
</option>
<option>Madame
</option>
</select>
<input type="text" id="div_scx-pageframe1-page1-txtnomconj44" class="div_scx-pageframe1-page1-txtnomconj44 form-control awBS-NGmember" title="Nom patronymique" tabindex="57" autocomplete="off" placeholder="Nom patronymique">
<div class="text-left form-group awBSgrp-txtprenomscon45">
<label id="div_scx-pageframe1-page1-lblprenoms13" class="div_scx-pageframe1-page1-lblprenoms13 control-label awBS-NGmember">Prénom
</label>
<input type="text" id="div_scx-pageframe1-page1-txtprenomscon45" class="div_scx-pageframe1-page1-txtprenomscon45 form-control awBS-NGmember" tabindex="58" autocomplete="off" placeholder="Prénom">
</div>
</div>
</div>
<div class="form-horizontal awBSgrp007 p010">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-lbldivorce14" class="div_scx-pageframe1-page1-lbldivorce14 control-label col-sm-2">Divorce
</label>
<div class="col-sm-10">
<div class="form-inline awBSgrp-txtdatemardiv46">
<input type="date" id="div_scx-pageframe1-page1-txtdatemardiv46" class="div_scx-pageframe1-page1-txtdatemardiv46 awDate form-control awBS-NGmember" tabindex="59" autocomplete="off" placeholder="Divorce" value=" / /">
<select id="div_scx-pageframe1-page1-combo1" class="div_scx-pageframe1-page1-combo1 form-control awBS-NGmember" tabindex="60" size="1" autocomplete="off">
<option>T.G.I.
</option>
<option>Appel
</option>
</select>
<input type="text" id="div_scx-pageframe1-page1-txtlieumardiv47" class="div_scx-pageframe1-page1-txtlieumardiv47 form-control awBS-NGmember" tabindex="61" autocomplete="off">
</div>
</div>
</div>
</div>
</fieldset>
<div id="div_scx-pageframe1-page1-adreref1" class="div_scx-pageframe1-page1-adreref1">
<div id="div_scx-pageframe1-page1-adreref1-adrtype1" class="div_scx-pageframe1-page1-adreref1-adrtype1" title="Adresse type">
<div class="form-horizontal awBSgrp002 p001">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-adreref1-adrtype1-label2" class="div_scx-pageframe1-page1-adreref1-adrtype1-label2 control-label col-sm-2">Adresse:
</label>
<div class="col-sm-10">
<div class="input-group awBSgrp-adresse">
<span class="input-group-addon">
<div id="div_scx-pageframe1-page1-adreref1-adrtype1-adr_type" class="div_scx-pageframe1-page1-adreref1-adrtype1-adr_type img-responsive">
<span class="fa fa-address-card fa-lg" aria-hidden="true">
</span>
</div>
</span>
<input type="text" id="div_scx-pageframe1-page1-adreref1-adrtype1-adresse" class="div_scx-pageframe1-page1-adreref1-adrtype1-adresse form-control" tabindex="45" autocomplete="off" onfocus="this.select();">
</div>
</div>
</div>
</div>
</div>
<div class="form-horizontal awBSgrp-txtadresse244 p002">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-adreref1-lblsuite6" class="div_scx-pageframe1-page1-adreref1-lblsuite6 control-label col-sm-2">Suite
</label>
<div class="col-sm-8">
<input type="text" id="div_scx-pageframe1-page1-adreref1-txtadresse244" class="div_scx-pageframe1-page1-adreref1-txtadresse244 form-control" tabindex="63" autocomplete="off" placeholder="Suite">
</div>
</div>
</div>
<div class="form-horizontal awBSgrp003 p003">
<div class="text-left form-group">
<label id="div_scx-pageframe1-page1-adreref1-lblcommune7" class="div_scx-pageframe1-page1-adreref1-lblcommune7 control-label col-sm-2">Commune
</label>
<div class="col-sm-10">
<div class="form-inline awBSgrp004">
<div class="input-group awBSgrp-codepostal">
<span class="input-group-addon">
<div id="div_scx-pageframe1-page1-adreref1-googlemaps" class="div_scx-pageframe1-page1-adreref1-googlemaps img-responsive awBS-NGmember">
<span class="fa fa-map-marker fa-lg" aria-hidden="true">
</span>
</div>
</span>
<input type="text" id="div_scx-pageframe1-page1-adreref1-codepostal" class="div_scx-pageframe1-page1-adreref1-codepostal form-control awBS-NGmember" tabindex="64" autocomplete="off">
</div>
<input type="text" id="div_scx-pageframe1-page1-adreref1-commune" class="div_scx-pageframe1-page1-adreref1-commune form-control awBS-NGmember" tabindex="65" autocomplete="off">
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="text" id="div_scx-pageframe1-page1-adreref1-email" class="div_scx-pageframe1-page1-adreref1-email email form-control" title="Adresse mél" tabindex="69" autocomplete="off" placeholder="Adresse mél" onfocus="this.select();">
</div>
<div class="form-group">
<input type="text" id="div_scx-pageframe1-page1-adreref1-telephone1" class="div_scx-pageframe1-page1-adreref1-telephone1 telephone form-control" title="n° de tél" tabindex="66" autocomplete="off" placeholder="n° de tél" onfocus="this.select();">
</div>
<div class="form-group">
<input type="text" id="div_scx-pageframe1-page1-adreref1-email2" class="div_scx-pageframe1-page1-adreref1-email2 email form-control" title="Adresse mél du conjoint" tabindex="73" autocomplete="off" placeholder="Adresse mél du conjoint" onfocus="this.select();">
</div>
<div class="form-group">
<input type="text" id="div_scx-pageframe1-page1-adreref1-telephone4" class="div_scx-pageframe1-page1-adreref1-telephone4 telephone form-control" title="n° du conjoint" tabindex="70" autocomplete="off" placeholder="n° du conjoint" onfocus="this.select();">
</div>
</div>
</div>
</div>
<div id="div_scx-pageframe1-page3" class="div_scx-pageframe1-page3 tab-pane" role="tabpanel">
<div class="container-fluid">
</div>
</div>
<div id="div_scx-pageframe1-page2" class="div_scx-pageframe1-page2 tab-pane" disabled role="tabpanel">
<div class="container-fluid">
<div class="row row-002 row-adjoindre">
<div class="col col-treeview col-xs-12 col-sm-10 text-left">
<div id="div_scx-pageframe1-page2-treeview" class="div_scx-pageframe1-page2-treeview" tabindex="74">
</div>
</div>
<div class="col col-adjoindre col-xs-7 col-sm-2 text-left">
<fieldset class="row">
<div class="form-group awBSgrp-voir p002">
<div class="btn-group-vertical awBSgrp-voir p002">
<button type="button" id="div_scx-pageframe1-page2-voir" class="div_scx-pageframe1-page2-voir doo-visualiser btn-default btn" tabindex="76" accesskey="V" disabled>
<span class="fa fa-eye" aria-hidden="true">
</span> Voir
</button>
<button type="button" id="div_scx-pageframe1-page2-supprimer" class="div_scx-pageframe1-page2-supprimer btn-default btn" tabindex="75" accesskey="S" disabled>
<span class="fa fa-times" aria-hidden="true">
</span> Supprimer
</button>
</div>
</div>
<div class="form-group">
<button type="button" id="div_scx-pageframe1-page2-renommer" class="div_scx-pageframe1-page2-renommer doo-visualiser btn-default btn" tabindex="78" accesskey="R" disabled>
<span class="glyphicon glyphicon-checkfa-lg" aria-hidden="true">
</span> Renommer
</button>
</div>
<div class="form-group">
<button type="button" id="div_scx-pageframe1-page2-adjoindre" class="div_scx-pageframe1-page2-adjoindre btn-primary btn" title="Adjoindre un fichier existant au dossier en cours" tabindex="77" accesskey="j">
<span class="fa fa-plus-square" aria-hidden="true">
</span> Adjoindre
</button>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<div class="row row-002 row-fermer">
<div class="col col-lock col-xs-12 col-sm-1 text-left">
<div id="div_scx-lock" class="div_scx-lock" style="display:none;" title="Vérouillage / déverrouillage de la zone informations">
<div class="form-group">
<div class="checkbox" id="div_scx-lock-bouton_div" data-toggle="buttons">
<label for="div_scx-lock-bouton" id="div_scx-lock-bouton_lbl" class="div_scx-lock-bouton graphical ChkOptLabel active btn btn-info" title="Vérouillage / déverrouillage de la zone informations">
<input type="checkbox" id="div_scx-lock-bouton" class="div_scx-lock-bouton graphical" title="Vérouillage / déverrouillage de la zone informations" tabindex="79" size="2" autocomplete="off" checked>
<span class="fa fa-lock" aria-hidden="true">
</span>
</label>
</div>
<div id="div_scx-lock-image" class="div_scx-lock-image img-responsive" style="display:none;">
<span class="fa fa-lock" aria-hidden="true">
</span>
</div>
<div id="div_scx-lock-image_dn" class="div_scx-lock-image_dn img-responsive" style="display:none;">
<span class="fa fa-unlock" aria-hidden="true">
</span>
</div>
<div id="div_scx-lock-image_d" class="div_scx-lock-image_d img-responsive" style="display:none;">
<span class="fa fa-lock" aria-hidden="true">
</span>
</div>
<div id="div_scx-lock-fleche" class="div_scx-lock-fleche img-responsive" style="display:none;">
<span class="fa fa-download" aria-hidden="true">
</span>
</div>
</div>
</div>
</div>
<div class="col col-visuactes1 col-xs-12 col-sm-4 text-left">
<div class="form-group awBSgrp-visuactes1 p001">
<div class="btn-group awBSgrp-visuactes1 p001">
<button type="button" id="div_scx-visuactes1" class="div_scx-visuactes1 btn-default btn" style="display:none;" title="Accéder à la liste des actes du client" tabindex="86" accesskey="A">
<span class="fa fa-eye" aria-hidden="true">
</span> Actes
</button>
<button type="button" id="div_scx-civil" class="div_scx-civil btn-default btn" style="display:none;" title="Confection et édition de l'état civil d'un client, sous forme de comparution à l'acte" tabindex="87" accesskey="E">
<span class="fa fa-user" aria-hidden="true">
</span> Etat civil
</button>
</div>
</div>
</div>
<div class="col col-changement col-xs-5 col-sm-2 text-left">
<div class="form-group">
<button type="button" id="div_scx-changement" class="div_scx-changement btn-default btn" title="Changement de situation maritale" tabindex="89" accesskey="C">
<span class="fa fa-users" aria-hidden="true">
</span> Changement
</button>
</div>
</div>
<div class="col col-vhccmd1 col-xs-5 col-sm-offset-1 col-sm-2 text-left">
<div class="form-group">
<button type="button" id="div_scx-vhccmd1" class="div_scx-vhccmd1 btn-default btn" title="Récupération des informations d'une pièce d'identité scannée" tabindex="90" accesskey="I">
<span class="fa fa-file-text" aria-hidden="true">
</span> Identité
</button>
</div>
</div>
<div class="col col-fermer col-xs-12 col-sm-2 text-right">
<div class="form-group">
<button type="button" id="div_scx-fermer" class="div_scx-fermer btn-primary btn" title="Fermer le travail en cours" tabindex="85" accesskey="F">
<span class="fa fa-window-close" aria-hidden="true">
</span> Fermer
</button>
</div>
</div>
</div>
</div>
<!--/ Généré le 03/08/2017 19:07:02 en 2,0 secs. par FoxInCloud version 2.25.0-beta.6 du 18/07/2017 16:08:49 -->
>Hi,
>
>I have not done HTML design with Bootstrap in a long while and now I am struggling with what should be a simple page (attached).
>
>The attached image shows the elements of the page on a regular computer screen. Since Bootstrap in mobile design first I need to apply various classes.
>
>Should the Employee ID and Employee Name - since they are on the same line - be in the same div class "form-group"? And then the Equipment ID and Equipment Description in another "form-group"?
>That is, should each line of the page be in a separate "form-group"?
>
>Basically if I can understand what classes and how to apply them to the Employee ID and Employee Name, maybe I will figure out the other elements too.
>
>TIA for any help.
Thierry Nivelet
FoxinCloud
Give your VFP application a second life, web-based, in YOUR cloud
http://foxincloud.com/Never explain, never complain (Queen Elizabeth II)
