Comment bien aligner des labels, inputs et bouton par Tamzoro - page 1

Bonjour,

Je rencontre un problème en BootStrap 5, je souhaiterai aligner correctement mes labels, inputs et bouton mais je n'y parviens pas.

Voici une capture d'écran ci dessous:

J'ai plusieurs problèmes...

1) Lorsque je tape un nom avec des caractères assez long dans mon label, il y a des conséquences dans mon input, le input a pris une taille de hauteur plus importante, comment je pourrais remédier à cela?

2) Mon bouton n'est pas aligné correctement comme pour mes inputs

Si quelqu'un a une solution, je suis vraiment intéressé.

Un grand merci pour votre aide

<!DOCTYPE html>
<html lang='en'>
   <head>
      <meta charset='UTF-8'>
      <meta http-equiv='X-UA-Compatible' content='IE=edge'>
      <meta name='viewport' content='width=device-width, initial-scale=1.0'>
      <title>Document</title>
      <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
   </head>
   <body>
      <div class="container pt-5 text-center">
         <h1 class="pb-5">Title</h1>
         <form>
            <div class="mb-3">
               <div class="d-inline-flex col-md-4 col-form-label text-right">
                  <label for="exampleInputEmail1" class="form-label d-flex justify-content-end align-items-end pe-3" style="min-width: 158px !important">Numéro du registre national </label>
                  <input type="text" class="form-control" name="exampleInputEmail1" style="min-width: 380px" aria-describedby="emailHelp" required>
               </div>
            </div>
            <div class="d-inline-flex col-md-4 col-form-label text-right">
               <label for="exampleInputEmail1" class="form-label d-flex justify-content-end align-items-end pe-3" style="min-width: 158px !important">Titulaire du portefeuille </label>
               <input type="text" class="form-control" name="exampleInputEmail1" style="min-width: 380px" aria-describedby="emailHelp" required>
            </div>
            <div class="mb-3">
               <div class="d-inline-flex col-md-4 col-form-label text-right">
                  <label for="exampleInputPassword1" class="form-label d-flex justify-content-end align-items-end pe-3" style="min-width: 158px !important">
                  Toutes les agences</label>
                  <select class="form-select" style="min-width: 380px !important">
                     <option>Toutes les agences</option>
                     <option>ATH - Ath</option>
                     <option>BAU - Baudour</option>
                  </select>
               </div>
            </div>
            <div class="row">
               <div class="text-center">
                  <button type="submit" class="btn btn-primary">Rechercher</button>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

-
Edité par Tamzoro 24 novembre 2021 à 11:45:26

Bonjour

Question 1 : c'est normal, toute la ligne est une flexbox (classe d-inline-flex), donc l'input s'ajuste à la hauteur du label,

Question 2 : le bouton rechercher est centré horizontalement dans son parent, donc aucune raison qu'il s'aligne avec les éléments du dessus, qui sont eux définis pour chaque ligne avec la class "col-md-4", qui a une largeur de 33%, et dont label et input ont des largeurs minimum

En plus bien entendu, les positions et les largeurs changent en fonction de la largeur du viewport, donc ta solution n'est pas la bonne si tu veux que pour toutes les largeurs le bouton soit aligné avec le bord gauche des input

Attention, je crois que tu ne maîtrises pas bien Boostrap 5 et les flexbox non plus

Comment bien aligner des labels, inputs et bouton

Comment bien aligner des labels, inputs et bouton

Supprimer

Modérer

Signaler le message aux modérateurs