Bootstrap 5 : Éléments complexes

Éléments complexes de Bootstrap

Objectif

Découverte des éléments complexes de Bootstrap
Tableaux
Images
Boutons et formulaires

1. Tableaux

Bootstrap offre plusieurs classes pour personnaliser l’apparence des tableaux :

.table : Classe de base pour appliquer une mise en forme simple au tableau.
.table-dark : Inverse les couleurs de base, avec un fond noir et un texte blanc.
.table-striped : Crée des tableaux avec des lignes alternées (fond blanc et gris clair).
.table-bordered : Ajoute des bordures autour des cellules et du tableau.
.table-borderless : Supprime toutes les bordures d’un tableau.
.table-hover : Modifie la couleur de fond d’une ligne lorsqu’elle est survolée par la souris.
.table-sm : Réduit la taille du tableau en diminuant le padding des cellules.
Couleurs contextuelles : Les classes comme .table-primary, .table-success, etc., permettent de modifier la couleur des lignes ou des cellules selon le contexte.
.table-responsive : Rend le tableau adaptable aux tailles d’écran en ajoutant une barre de défilement horizontale si nécessaire. Il existe des variantes comme .table-responsive-sm, .table-responsive-md, etc., pour contrôler la réactivité selon les breakpoints.

Testez ce bloc de code dans un nouveau fichier html.

code table

<div class="container">
    <h1>Tableaux Bootstrap</h1>
   <table class="table table-hover">
        <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Age</th>
            <th>Remarque</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Terieur</td>
            <td>Alain</td>
            <td>45</td>
            <td>Bien dans son sofa</td>
        </tr>
        <tr>
            <td>Fonfec</td>
            <td>Sophie</td>
            <td>63</td>
            <td></td>
        </tr>
        <tr>
            <td>Ptipeu</td>
            <td>Justin</td>
            <td>27</td>
            <td>Et pas plus</td>
        </tr>
        <tr>
            <td>Cover</td>
            <td>Harry</td>
            <td>14</td>
            <td>Pas Potter</td>
        </tr>
        </tbody>
    </table>
</div>

À la suite, complétez le fichier avec le même tableau en en ajoutant à la classe .table, les classes suivantes pour observer :

Un tableau avec .table-dark

Un tableau clair ou sombre avec .table-striped

Un tableau clair avec .table-bordered ou .table-borderless

Un tableau clair ou sombre avec .table-hover

Un tableau clair ou sombre avec .table-sm

Testez ce bloc de code dans un nouveau fichier html.

code table couleurs

<h1>Couleurs des tableaux Bootstrap</h1>
      <table class="table">
        <thead>
          <tr>
            <th>Classe</th>
            <th>Couleur</th>
            <th>Couleur</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Default</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-active">
            <td>Active</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-primary">
            <td>Primary</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-secondary">
            <td>Secondary</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-success">
            <td>Success</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-danger">
            <td>Danger</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-warning">
            <td>Warning</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-info">
            <td>Info</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-light">
            <td>Light</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-dark">
            <td>Dark</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr>
            <td class="table-primary">Primary</td>
            <td class="table-success">Success</td>
            <td class="table-warning">Warning</td>
          </tr>
        </tbody>
      </table>

      <table class="table table-dark">
        <thead>
          <tr>
            <th>Classe</th>
            <th>Couleur</th>
            <th>Couleur</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Default</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-active">
            <td>Active</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
          <tr class="table-primary">
            <td>Primary</td>
            <td>Une cellule</td>
            <td>Une cellule</td>
          </tr>
        </tbody>
      </table>
    </div>

Testez ce bloc de code dans un nouveau fichier html.

code table responsive

<div class="container border">
      <h1>Tableaux Bootstrap responsives</h1>
      <h2>Tableau toujours responsive</h2>
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th>Numéro de client</th>
              <th>Nom</th>
              <th>Prénom</th>
              <th>Age</th>
              <th>Sexe</th>
              <th>Mail</th>
              <th>Adresse</th>
              <th>Ville</th>
              <th>Code postal</th>
              <th>Pays</th>
              <th>Nationalité</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>123</td>
              <td>Dupond</td>
              <td>Pierre</td>
              <td>25</td>
              <td>Masculin</td>
              <td>pierre.dupont@intradef.gouv.fr</td>
              <td>16 boulevard Lahitolle</td>
              <td>Bourges</td>
              <td>18021</td>
              <td>France</td>
              <td>Française</td>
            </tr>
          </tbody>
        </table>
      </div>
      <br><br>
      <h2>Tableau responsive jusqu'à 768px</h2>
      <div class="table-responsive-md">
        <table class="table">
          <thead>
            <tr>
              <th>Numéro de client</th>
              <th>Nom</th>
              <th>Prénom</th>
              <th>Age</th>
              <th>Sexe</th>
              <th>Mail</th>
              <th>Adresse</th>
              <th>Ville</th>
              <th>Code postal</th>
              <th>Pays</th>
              <th>Nationalité</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>123</td>
              <td>Dupond</td>
              <td>Pierre</td>
              <td>25</td>
              <td>Masculin</td>
              <td>pierre.dupont@intradef.gouv.fr</td>
              <td>16 boulevard Lahitolle</td>
              <td>Bourges</td>
              <td>18021</td>
              <td>France</td>
              <td>Française</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

2. Images

Bootstrap permet de personnaliser les images de différentes manières :

Cadres d’images : Les classes .rounded et .rounded-circle détourent les images avec des bords arrondis ou transforment l’image en ellipse, tandis que .img-thumbnail ajoute une bordure visible.
Aligner ou centrer une image : Utilisez .float-start et .float-end pour flotter l’image à gauche ou à droite. Pour la centrer, utilisez un conteneur avec .text-center ou appliquez .d-block et .mx-auto.
Images responsives : Appliquez la classe .img-fluid pour adapter automatiquement la taille de l’image à celle de son parent.
Figure et figcaption : Utilisez .figure, .figure-img, et .figure-caption pour personnaliser l’apparence des éléments figure et figcaption. Si une image dans un élément figure doit être responsive, ajoutez la classe .img-fluid.

Dans un nouveau fichier html, insérez l’image disponible sur https://www.w3.org/html/logo/downloads/HTML5_sticker.png sur un container de 2 colonnes. L’image aura un style CSS "width:100%; height:auto". Appliquez les classes Bootstrap pour obtenir le résulat suivant :

Explorez lez différentes tailles et directions d’arrondi.

Ajouter un nouveau container à la suite du fichier. Placez simplement à l’intérieur l’image précédente et celle sur https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png, dotées du style style="width:200px; height:auto" ; placez les à gauche et à droite du container. Expérimentez le caractère responsive de ce placement pour permuter les positions auton du breakpoint md. Si vous avez des recouvrements de container, utilisez la classe overflow-auto

Ajouter un nouveau container à la suite du fichier et placez-y une image centrée.

Ajouter un container responsive avec une image de la classe .img-fluid. Faites de même avec un container responsive et 3 colonnes de largeur .col-2, .col-4, .col-6 et l’image à l’intérieur avec la classe .img-fluid.

Enfin ajoutez un container responsive avec l’image du sticker HTML5 fluide et arondie dans une figure (voir https://www.w3schools.com/tags/tag_figure.asp) avec la légende Sticker HTML5 centrée. Faites en sorte que la légende disparaisse pour les petits écrans.

3. Boutons

Bootstrap permet de personnaliser les boutons (<button>) en ajustant leur couleur, forme, taille, type d’affichage et état. On utilise la classe de base .btn et les classes associées comme .btn-*. Ces classes fonctionnent également avec les liens (<a>) et les champs de formulaire (<input>).

3.1. Couleur de fond des boutons

Bootstrap propose des couleurs contextuelles que l’on peut appliquer aux boutons pour leur donner un fond coloré. Lorsqu’un bouton est survolé par la souris, sa couleur de fond change légèrement.

Testez ce bloc de code dans un nouveau fichier html et observez les classes disponibles pour personnaliser l’apparence des boutons

Notez qu’il recommandé, lors de la création de boutons en HTML, d’indiquer l’intention du bouton en utilisant un attribut type sinon il se comportera comme un bouton de type submit et tentera d’envoyer un formulaire. Il est donc préférable d’utiliser type="button" pour spécifier qu’il n’a pas de comportement spécial par défaut.

3.2. Bordures des boutons

Bootstrap permet de créer des boutons avec des bordures colorées et un fond transparent. Pour cela, il faut utiliser les classes .btn-outline-* associées aux couleurs contextuelles.

Testez ce bloc de code à la suite du fichier html et observez l’apparence au survol des boutons

3.3. Taille et affichage des boutons

Bootstrap permet également d’ajuster la taille des boutons. Pour créer des boutons plus petits ou plus grands que la taille par défaut, on utilise les classes .btn-sm (petite taille) et .btn-lg (grande taille).

Testez ce bloc de code à la suite du fichier html.

3.4. Groupes de boutons

Bootstrap permet de grouper plusieurs boutons pour leur donner une apparence cohérente. Pour ce faire, on utilise la classe .btn-group sur un élément HTML qui contiendra les boutons à grouper, généralement un <div>.

Testez ce bloc de code à la suite du fichier html.

Il est aussi conseillé d’ajouter les attributs role et aria-label (ARIA = « Accessible Rich Internet Applications ») pour définir le rôle du groupe de boutons et fournir des informations supplémentaires aux technologies d’assistance comme les lecteurs d’écran. Ces attributs sont essentiels pour assurer l’accessibilité du contenu (utilisateurs malvoyants ou non voyants).

3.5. Taille des groupes de boutons

Comme pour les boutons individuels, on peut définir la taille des groupes de boutons avec les classes .btn-group-sm (petite taille) et .btn-group-lg (plus grande taille).

Testez ce bloc de code à la suite du fichier html.

3.6. Listes de boutons en colonne

Avec la classe .btn-group-vertical on créé un groupe de boutons en colonne.

À la suite du fichier html, ajoutez un groupe vertical de 3 boutons Haut, Milieu, Bas de couleur .btn-secondary.

3.7. Imbrication de groupes de boutons et menus

Il est possible d’imbriquer des groupes de boutons pour créer des menus déroulants. Cette méthode combine boutons et menus dans un même groupe, mais elle est à éviter sauf pour un usage réel des boutons car les barres de navigation peuvent être plus pratiques. Pour créer un menu déroulant, il suffit de placer un groupe de boutons à l’intérieur d’un autre, en utilisant des liens (<a>) pour simuler un menu classique. Cette approche nécessite l’inclusion des fichiers JavaScript de Bootstrap.

Testez ce bloc de code à la suite du fichier html.

code bouton-dropdown

<div class="container">
    <h1>Boutons</h1>
    <div class="btn-group" role="group" aria-label="Groupe de boutons avec menu intégré">
        <button type="button" class="btn btn-secondary">Bouton n°1</button>
        <button type="button" class="btn btn-secondary">Bouton n°2</button>

        <div class="btn-group" role="group" aria-label="Menu déroulant">
            <button id="menuDeroulant" type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">Menu déroulant
            </button>

            <div class="dropdown-menu" aria-labelledby="menuDeroulant">
                <a class="dropdown-item" href="#">Lien n°1</a>
                <a class="dropdown-item" href="#">Lien n°2</a>
                <a class="dropdown-item" href="#">Lien n°3</a>
            </div>
        </div>
    </div>
</div>

4. Listes

Bootstrap permet de styliser les listes et de créer des groupes de listes avec la classe .list-group, appliquée à la liste, et .list-group-item pour ses éléments. Ce style s’applique aux listes ordonnées (<ol>) et non ordonnées (<ul>).

Testez ce bloc de code dans un nouveau fichier html.

Observez le rendu des listes numérotées ou non.

4.1. Personnalisation des listes

Suppression des bordures : Ajoutez .list-group-flush pour un rendu sans bordure.
Affichage horizontal : Utilisez .list-group-horizontal pour aligner les éléments en ligne, avec des variantes responsives (.list-group-horizontal-{sm|md|lg|xl}).

À la suite du fichier html, ajoutez une liste sans bordure et une liste horizontale responsive pour les écrans moyens.

4.2. Listes de liens et boutons

Pour styliser des groupes de liens ou boutons, appliquez .list-group à l’élément parent et .list-group-item à chaque élément. Ajoutez .list-group-item-action pour un effet interactif (hover, clic). Ne combinez pas .btn avec .list-group-item.

Testez ce bloc de code à la suite du fichier html.

4.3. Personnalisation des couleurs

Les classes .list-group-item-* permettent d’appliquer les couleurs contextuelles de Bootstrap aux éléments de liste.

Testez ce bloc de code à la suite du fichier html.

code listes-couleurs

<div class="container">
    <h1>Listes</h1>
    <ul class="list-group">Liste HTML classique :
        <li class="list-group-item">Défaut</li>
        <li class="list-group-item list-group-item-primary">Pimary</li>
        <li class="list-group-item list-group-item-secondary">Secondary</li>
        <li class="list-group-item list-group-item-success">Success</li>
        <li class="list-group-item list-group-item-danger">Danger</li>
        <li class="list-group-item list-group-item-warning">Warning</li>
        <li class="list-group-item list-group-item-info">Info</li>
        <li class="list-group-item list-group-item-light">Light</li>
        <li class="list-group-item list-group-item-dark">Dark</li>
    </ul>
    <hr />
    <div class="list-group">Liste de liens :
        <a href="#" class="list-group-item list-group-item-action">Défaut</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light</a>
        <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark</a>
    </div>
</div>

4.4. Listes interactives avec onglets

Grâce aux fichiers JavaScript de Bootstrap, on peut afficher un contenu différent selon l’élément de liste sélectionné. Utilisez :

data-bs-toggle pour inverser la visibilité,
.tab-content et .tab-pane pour structurer l’affichage,
.show et .active pour définir l’élément actif,
.fade pour une transition en fondu.

Les attributs aria-controls et aria-labelledby améliorent l’accessibilité en associant les éléments contrôlés et liés.

Testez ce bloc de code à la suite du fichier html.

code listes-panneaux

<div class="container">
    <h1>Listes</h1>
    <div class="row">
        <div class="col-4">
            <div class="list-group" id="list-tab" role="tablist">
                <a class="list-group-item list-group-item-action active" id="onglet1" data-bs-toggle="list"  href="#o1"
                   role="tab" aria-controls="onglet1">Onglet 1</a>
                <a class="list-group-item list-group-item-action" id="onglet2" data-bs-toggle="list" href="#o2" role="tab"
                   aria-controls="onglet2">Onglet 2</a>
                <a class="list-group-item list-group-item-action" id="onglet3" data-bs-toggle="list" href="#o3" role="tab"
                   aria-controls="onglet3">Onglet 3</a>
                <a class="list-group-item list-group-item-action" id="onglet4" data-bs-toggle="list" href="#o4" role="tab"
                   aria-controls="onglet4">Onglet 4</a>
            </div>
        </div>
        <div class="col-8">
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade active show" id="o1" role="tabpanel" aria-labelledby="onglet1">Contenu du
                    premier onglet
                </div>
                <div class="tab-pane fade" id="o2" role="tabpanel" aria-labelledby="onglet2">Contenu du deuxième
                    onglet
                </div>
                <div class="tab-pane fade" id="o3" role="tabpanel" aria-labelledby="onglet3">Contenu du troisième
                    onglet
                </div>
                <div class="tab-pane fade" id="o4" role="tabpanel" aria-labelledby="onglet4">Contenu du quatrième
                    onglet
                </div>
            </div>
        </div>
    </div>
</div>

5. Formulaires

Bootstrap propose diverses classes pour structurer et styliser les formulaires.

5.1. Mise en forme des champs de formulaire

Les classes :

.form-control : applique un style aux champs (<input>, <select>, <textarea>).
.form-select : applique un style aux champs select
.form-label : applique un style au <label> d’un champ.
.form-control-file : spécifique aux champs de type file.
.form-control-range : utilisé pour les champs de type range.
.form-{control|select}-sm et .form-{control|select}-lg : ajustent la taille des champs.
.form-control-plaintext : affiche un champ en lecture seule avec un rendu de texte simple.

Dans un nouveau fichier html, reproduisez le formulaire suivant :

ex21 1

Utilisez pour cela les balises <fieldset>, <label>, <input> avec les attributs placeholder et type de valeur text ou email, <select> associé à <option> et <optgroup> et <textarea>.

Activez Bootstrap, placez le contenu de la page dans un .container, et ajoutez la classe .form-control aux éléments de formulaire <input>, <select> et <textarea>. Vous remarquerez que Bootstrap applique un display : block à la plupart des éléments de formulaire par défaut (ils occupent leur propre ligne).

Modifiez la taille des <input> de nom (plus grand) et email (plus petit) et du <select>. Ajoutez au dessus de la boite de sélection, un <input> de type text, de classe .form-control-plaintext avec un placeholder 1 rue de la paix et associé au label Entrez votre adresse le précédant.

Rappelons qu’un élément de formulaire peut être non modifiable s’il possède l’attribut readonly ou désactivé avec l’attribut disabled. Testez ces attributs.

Complétez ce formulaire avec :

code autre formulaires

        <label for="selection" class="form-label">Une liste select</label>
        <select id="selection" class="form-select">
            <option value="">Liste de choix...</option>
            <optgroup label="Groupe d'options 1">
                <option value="">Option 1</option>
                <option value="">Option 2</option>
                <option value="">Option 3</option>
            </optgroup>
            <optgroup label="Groupe d'options 2">
                <option value="">Option 4</option>
                <option value="">Option 5</option>
            </optgroup>
        </select>

        <label for="bio" class="form-label">Biographie</label>
        <textarea class="form-control" id="bio" rows="3"></textarea>


        <label for="recette" class="form-label">Votre plat préféré</label>
        <input class="form-control" list="recettes" name="recette" id="recette">
        <datalist id="recettes">
            <option value="Pates au ">
            <option value="Gratin de ">
            <option value="Curry de ">
            <option value="Riz au ">
            <option value="Légumes en ">
        </datalist>

        <label for="intervalle" class="form-label">Intervalle : </label>
        <input type="range" class="form-control-range" id="intervalle">

        <label for="fichier" class="form-label">Fichier : </label>
        <input type="file" class="form-control-file" id="fichier">

Une démonstration plus détaillée des filechooser de bootstrap 5 est disponible sur https://getbootstrap.com/docs/5.0/forms/form-control/#file-input .

5.2. Ajout de blocs d’aide

La classe .form-text affiche une notice d’aide sous un champ avec mise en forme. De plus le label associé à un élément de formulaire peut être inclu dans celui-ci avec la classe .form-floating de l’élément parent.

Testez ce bloc de code :

code bloc d’aide

<div class="container">
    <h1>Formulaires</h1>
    <form>
        <label for="nom">Entrez votre nom d'utilisateur</label>
        <input type="nom" class="form-control" id="nom" placeholder="John_Doe" aria-describedby="aideUserName">
        <div id="aideUserName" class="form-text">Le nom d'utilisateur doit contenir au moins 8 caractères sans
            espace</div>

        <div class="form-floating mt-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">Entrez votre adresse email</label>
        </div>
    </form>

5.3. Cases à cocher et boutons radio

Bootstrap assure une apparance homogène des checkbox et radio buttons entre navigateurs et appareils. La classe utilisée est .form-check qui sert de conteneur à l' <input> de classe .form-check-input et son <label> de classe .form-check-label associé.

De plus, la classe .form-switch transforme un checkbox en interupteur.

Testez ce bloc de code :

code checkbox radio

<div class="container">
    <h1>Formulaires</h1>
    <form>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="c1" checked id="ck1">
            <label class="form-check-label" for="ck1">Case 1</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="c2" id="ck2">
            <label class="form-check-label" for="ck2">Case 2</label>
        </div>

        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" value="c3" checked id="ck3">
            <label class="form-check-label" for="ck3">Case 1</label>
        </div>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" value="c4"  id="ck4">
            <label class="form-check-label" for="ck4">Case 1</label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="radio" name="radio" id="radio1" value="o1">
            <label class="form-check-label" for="radio1">Option 1</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="radio" name="radio" id="radio2" value="o2">
            <label class="form-check-label" for="radio2">Option 2</label>
        </div>
    </form>
</div>

5.4. Structuration d’un formulaire

5.4.1. Groupes

La classe .input-group est un conteneur permettant d’améliorer une saisie en ajoutant une icône, un texte avec la classe .input-group-text ou un bouton devant ou derrière le champ de saisie en tant que « texte d’aide ». Différents éléments de formulaire peuvent aussi être regroupés avec cette classe.

Les groupes peuvent être ajustés en taille par les classes .input-group-sm et .input-group-lg

Testez ce bloc de code :

code groupes

<div class="container">
    <h1>Formulaires</h1>
    <form>
        <div class="input-group mb-3">
            <label class="input-group-text" id="basic-name-aria" for="basic-name">Entrez votre nom d'utilisateur&nbsp;:&nbsp;</label>
            <input type="text" class="form-control" id="basic-name" aria-describedby="basic-name-aria"
                   placeholder="John_Doe">
        </div>

        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Username" aria-label="Username">
            <span class="input-group-text">@</span>
            <select class="form-select" id="server" aria-label="Server>
            <option value="">Server...</option>
            <optgroup label="Domains">
                <option value="server1">server1.mydomain.xyz</option>
                <option value="server2">server2.mydomain.xyz</option>
                <option value="server3">server3.mydomain.xyz</option>
            </optgroup>
            </select>
        </div>

        <div class="input-group mb-3">
            <label class="input-group-text" for="montant">Montant</label>
            <input type="number" min="0" max="" class="form-control" aria-label="Montant à l'euro près" id="montant">
            <span class="input-group-text bg-body">.00</span>
            <span class="input-group-text">€</span>
        </div>

        <div class="input-group">
            <span class="input-group-text">Avec un textarea</span>
            <textarea class="form-control" style="min-height: 5rem;" aria-label="Avec un textarea"></textarea>
        </div>

    </form>
</div>

Modifiez la taille d’un ou plusieurs groupes d’input.

Notez que les groupes d’inputs supportent aussi les boutons avec dropdown (voir https://getbootstrap.com/docs/5.0/forms/input-group/#buttons-with-dropdowns).

5.4.2. Layout

Bootstrap 5 ne fournit pas de style par défaut pour l’élément <form>, qui est le conteneur obligatoire pour les éléments de formulaire, mais s’appuie sur le rendu intégré aux navigateurs.

Bootstrap applique display: block et width: 100% à la plupart des contrôles de formulaire, ce qui les empile verticalement. Des classes supplémentaires permettent d’ajuster la mise en page au besoin.

La manière la plus simple d’organiser des formulaires est d’utiliser les classes de marges .mb-* pour assurer la cohérence des alignements. Les éléments <div> ou <fieldset> peut être aussi utiliés librement.

Les formulaires plus complexes sont organisés avec le système de grille comme vu précédement. Bootstrap 5 fournit donc les classes :

.row : pour disposer des éléments de formulaires sur une ligne
.col-*-* : pour placer les éléments de formulaires dans des colonnes, responsives ou non, ocupants tout ou partie des 12 colonnes d’une ligne. Une colonne de taille 12 force la composition d’une nouvelle ligne et place un élément de formulaire sur toute la largeur.
.col-form-label, .col-form-label-sm, .col-form-label-lg : qui assurent l’alignement des labels avec les champs correspondants.

L’espacement entre colonne est ajustable par la taille des goutières et les classes .g-*.

Testez ce bloc de code :

code layout1

<div class="container">
    <div class="row">
        <div class="col-sm-6 ">
            <div class="row g-0">
                <div class="col-sm-6">
                    <input type="text" class="form-control" placeholder="Nom" id="id-nom">
                </div>
                <div class="col-sm-6">
                    <input type="text" class="form-control" placeholder="Prénom">
                </div>
            </div>
        </div>
        <div class="col-6 m-sm-0 mt-3 ">
            <input type="text" class="form-control" placeholder="Pseudo">
        </div>
        <div class="col-12 mt-3">
            <label for="adresse">Votre adresse : </label>
            <input type="text" class="form-control" placeholder="Adresse" id="adresse">
        </div>
    </div>
    <div class="row mt-3">
        <label for="adresse2" class="col-sm-2 col-form-label">Adresse&nbsp;2&nbsp;:</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" placeholder="Adresse" id="adresse2">
        </div>
    </div>
</div>

Observez le positionnement responsive des champs Nom, Prénom et Pseudo ainsi que la place occupée pour les saisies d’adresses. Changez la taille du <label> et <input> de l’adresse 2.

Pour des mises en page compactes et réactives, des placements automatiques sont disponibles par .col-auto où la largeur des colonnes s’adapte automatiquement au contenu ; .row-cols-* créé des mises en page réactives avec lignes. Les classes de gouttières peuvent ajuster en plus un bon espacement entre les éléments.

Testez ce bloc de code :

code layout2

<div class="container">
    <form class="row my-3">
        <div class="col-auto">
            <div class="input-group">
                <label for="autoSizingInput" class="input-group-text">Nom</label>
                <input type="text" class="form-control" id="autoSizingInput" placeholder="Jean Dupont">
            </div>
        </div>
        <div class="col-auto">
            <button type="submit" class="btn btn-primary">Envoyer</button>
        </div>
    </form>

    <form class="row row-cols-md-auto g-3">
        <div class="col-12">
            <div class="input-group">
                <label for="inlineFormInput" class="input-group-text">@</label>
                <input type="text" class="form-control" id="inlineFormInput"
                       placeholder="Nom d'utilisateur">
            </div>
        </div>
        <div class="col-12">
            <button type="submit" class="btn btn-primary">Soumettre</button>
        </div>
    </form>
</div>

5.5. Validation des formulaires

Bootstrap et ses composants permettent de valider les formulaires HTML côté client. Cette validation ne doit en aucun cas remplacer une vérification approfondie effectuée côté serveur. En effet, la validation côté client est surtout utile pour corriger les erreurs des utilisateurs inattentifs et leur fournir des indications sur les données requises. Elle ne permet cependant pas de se prémunir contre des comportements malveillants.

Bootstrap repose sur les pseudo-classes CSS :invalid et :valid pour gérer la validation des formulaires. Ces pseudo-classes s’appliquent aux éléments <input>, <select> et <textarea>. Il faut ajouter l’attribut novalidate à l’élément <form> pour que Bootstrap prenne en charge les validations.

Pour afficher des indications sur la validité des champs avant l’envoi du formulaire, on utilise la classe .was-validated à l’élément <form>.
Pour afficher ces indications après soumission du formulaire, on utilise la classe .needs-validation.

Pour que la vérification de formulaire soit opérée avec la classe .needs-validation il faut ajouter une portion de code javascript en fin de <body> comme suit :

code pour needsvalidation

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
        if (!form.checkValidity()) {
          event.preventDefault()
          event.stopPropagation()
        }

        form.classList.add('was-validated')
      }, false)
    })
})()
</script>

Selon la validité des données saisies, les champs auront une bordure verte ou rouge.

Il est également possible d’afficher un message personnalisé sous chaque champ pour indiquer si les données sont correctes ou fournir une aide en cas d’erreur. Pour cela, on utilise les classes .valid-feedback et .invalid-feedback de Bootstrap permettant d’afficher ces messages en fonction de la validité des données saisies.

Testez ce bloc de code :

code validation

<div class="container">
    <h1>Formulaires</h1>
    <form>
        <div class="row">
            <div class="col-md-6">
                <label for="prenom">Prénom</label>
                <input type="text" class="form-control" id="prenom" placeholder="John" required>
            </div>
            <div class="col-md-6">
                <label for="nom">Nom</label>
                <input type="text" class="form-control" id="nom" placeholder="Doe" required>
            </div>
        </div>
        <div class="row">
             <div class="col-md-6">
                <label for="validationUsername" class="form-label">Username</label>
                <div class="input-group">
                    <span class="input-group-text">@</span>
                    <input type="text" class="form-control" id="validationUsername" required>
                </div>
            </div>

            <div class="col-md-6 ">
                <label for="chooseRole" class="form-label">Role</label>
                <div class="input-group">
                    <select  class="form-control" id="chooseRole" required>
                        <option selected disabled value="">Choose...</option>
                        <option>Owner</option>
                        <option>Maintainer</option>
                        <option>Developer</option>
                        <option>Guest</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="cgu" required>
                    <label class="form-check-label" for="cgu">J'accepte les conditions générales d'utilisation</label>
                </div>
                <button class="btn btn-primary" type="submit">Envoyer</button>
            </div>
        </div>
    </form>

Validez le formulaire sans remplir aucun champs et obervez la vérification opérée par le navigateur.
Ajoutez l’attribut novalidate à <form> et observez le comportement à la validation.
ajoutez la classe .needs-validation à <form> et observez le comportement à la validation.
ajoutez la classe .was-validated au conteneur englobant la saisie du Username et observez le déclenchement de la validation au rechargement de la page.
ajoutez des conteneurs <div class="valid-feedback"> et <div class="invalid-feedback"> à coté des éléments de saisie :
- pour le prénom : texte de feedback invalide Entrez un prénom et texte de feedback valide Ok!
- pour le nom : texte de feedback invalide Entrez un nom
- pour l’Username : texte de feedback invalide Choisissez un username
- pour les conditions générales d’utilisation : texte de feedback invalide Vous devez accepter les CGU pour continuer.