Sommaire

L’alignement vertical dans les formulaires CSS POUR LES FORMULAIRES:Alignement

Bootstrap permet d’aligner les étiquettes et les éléments du formulaire verticalement avec l’utilisation de la classe .form-horizontal dans l’élément <form>.

Cet alignement est basé sur la grille adaptative. Nous verrons l’utilisation de la grille adaptative de Bootstrap dans le chapitre La grille adaptative. C’est donc à vous d’utiliser les classes voulues dans les éléments <div>, <label> et <input> pour les aligner comme vous le souhaitez.

Dans cet exemple les étiquettes des champs sont placées sur la deuxième colonne (col-lg-2) de la grille de Bootstrap (sur une grille de 12 colonnes). Les autres objets sont placés sur la sixième colonne (col-lg-6).

Voici le code HTML de ce formulaire :

<form class="form-horizontal" role="form"> 
  <div class="form-group"> 
    <label for="leprenom" class="col-lg-2 control-label">Prénom</label> 
    <div class="col-lg-6"> 
      <input type="email" class="form-control" id="leprenom"
placeholder="Prénom"> 
    </div> 
  </div> 
  <div class="form-group"> 
    <label for="lenom" class="col-lg-2 control-label">Nom</label>  ...