[BootStrap-5] Centrage pour des labels et inputs

Version imprimable

Bonsoir,

J'ai l'impression que mes labels et inputs ne sont pas correctement centrés...

J'ai utilisé la classe "container" en BootStrap 5, mais j'ai pas l'impression que ça a fonctionné?

https://zupimages.net/up/21/47/q06r.png

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<!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>Sélection d'un portefeuille</h1>
         <form>
            <div class="pt-5">
               <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: 240px !important">Type of account</label>
                  <select class="form-select" style="min-width: 380px !important">
                     <option>All agencies</option>
                     <option>ATH - Ath</option>
                     <option>BAU - Baudour</option>
                  </select>
               </div>
            </div>
            <div class="mt-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: 240px !important">Type of account</label>
                  <select class="form-select" style="min-width: 380px !important">
                     <option>All agencies</option>
                     <option>ATH - Ath</option>
                     <option>BAU - Baudour</option>
                  </select>
               </div>
            </div>
            <div class='row'>
               <div class="col-12">
                  <button type="submit" class="btn btn-primary">Confirm</button>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

Bonjour,
repart sur quelque chose de plus simple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="row row-cols-2">
  <div class="col text-end">
    <label for="exampleInputPassword1" class="form-label">Type of account</label>
  </div>
  <div class="col">
    <select class="form-select">
      <option>All agencies</option>
      <option>ATH - Ath</option>
      <option>BAU - Baudour</option>
    </select>
  </div>
</div>

ce sera un bon début ou pas loin ;)

Bonjour,

Merci pour ton aide, c'est exactement ce que je voulais!

J'ai juste une petite question, comment fais-tu pour aligner correctement un bouton par rapport aux inputs?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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>Sélection d'un portefeuille</h1>
         <form>
            <div class="row row-cols-2">
               <div class="col text-end">
                  <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
               </div>
               <div class="col">
                  <select class="form-select">
                     <option>All agencies</option>
                     <option>ATH - Ath</option>
                     <option>BAU - Baudour</option>
                  </select>
               </div>
            </div>
            <div class="row row-cols-2 pt-3">
               <div class="col text-end">
                  <label for="exampleInputPassword1" class="form-label">Type de portefeuille </label>
               </div>
               <div class="col">
                  <select class="form-select">
                     <option>All agencies</option>
                     <option>ATH - Ath</option>
                     <option>BAU - Baudour</option>
                  </select>
               </div>
            </div>
            <div class="row row-cols-2 pt-3">
               <div class="col text-end">
                  <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
               </div>
               <div class="col">
                  <input type="text" class="form-control" name="exampleInputEmail1" style="min-width: 380px" aria-describedby="emailHelp" required>
               </div>
            </div>
            <div class="row row-cols-2">
               <div class="col">
                  <button type="submit" class="btn btn-primary">Valider</button>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

24/11/2021, 15h14
NoSmoking
Pour ton <button> il faut faire simple, BootStrap complique déjà joyeusement les choses :mrgreen:
Code:

1 2 3 <div class="pt-3"> <button type="submit" class="btn btn-primary">Valider</button> </div>
24/11/2021, 15h30
Tamzoro

Donc c'est pas possible d'aligner le bouton par rapport aux inputs?

Tu veux dire centré en dessous des <input>, si oui utilise la même structure.

Code:

1
2
3
4
5
6
<div class="row row-cols-2 pt-3">
  <div class="col"><!-- celle là est vide --></div>
  <div class="col">
    <button type="submit" class="btn btn-primary">Valider</button>
  </div>
</div>

24/11/2021, 16h07
Tamzoro

En fait, je voudrais vraiment que le bouton soit aligné de la même manière que les inputs.

https://zupimages.net/up/21/47/dtxk.png

Je ne parviens pas à reproduire ce dont j'essaye de faire. :?
24/11/2021, 16h18
NoSmoking
Il te faut dans ce cas annuler le centrage hérité du parent via le text-center.
Code:

1 2 3 <div class="col text-start"> <button type="submit" class="btn btn-primary">Valider</button> </div>
24/11/2021, 16h30
Tamzoro

Merci beaucoup NoSmoking, je n'aurai jamais trouvé la solution sans ton aide.

Un grand merci à toi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
        <div class="container pt-5">
          <h1 class="text-center">Sélection d'un portefeuille</h1>
          <form>
            <div class="row">
              <div class="col-md-4 text-start text-md-end">
                <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
              </div>
              <div class="col-md-8">
                <select class="form-select">
                  <option>All agencies</option>
                  <option>ATH - Ath</option>
                  <option>BAU - Baudour</option>
                </select>
              </div>
            </div>
            <div class="row pt-3">
              <div class="col-md-4 text-start text-md-end">
                <label for="exampleInputPassword1" class="form-label">Type de portefeuille </label>
              </div>
              <div class="col-md-8">
                <select class="form-select">
                  <option>All agencies</option>
                  <option>ATH - Ath</option>
                  <option>BAU - Baudour</option>
                </select>
              </div>
            </div>
            <div class="row pt-3">
              <div class="col-md-4 text-start text-md-end">
                <label for="exampleInputPassword1" class="form-label">Numéro du registre national</label>
              </div>
              <div class="col-md-8">
                <input type="text" class="form-control" name="exampleInputEmail1" style="min-width: 380px" aria-describedby="emailHelp" required>
              </div>
            </div>
            <div class="row pt-3">
              <div class="col-md-4"></div>
              <div class="col-md-8 text-start">
                <button type="submit" class="btn btn-primary">Valider</button>
              </div>
            </div>
          </form>
        </div>

"text-center" doit s'appliquer sur (ne concerne que) le <h1>
col-md-xx : on passe à la ligne sur smartphone
attention : supprimer les " row-cols-2"
+ remplacer les "text-end" par "text-start text-md-end" si on veut les labels à gauche sur smartphone

+ suppression de style="min-width: 380px" (inutile) sur <input>

24/11/2021, 17h19
NoSmoking
Juste une petite remarque, pour conserver le centrage par rapport au <h1> comme initialement demandé, il serait judicieux de mettre des md-6 à la place des md-4 et md-8.
Code:

1 2 <div class="col-md-6"></div> <div class="col-md-6 text-start"></div>
Je pense d'autre part qu'il ne serait pas inintéressant de lire au moins Grid system pour comprendre la philosophie de BootStrap !
24/11/2021, 17h24
jreaux62

On voit néanmoins que le mot "Centrage" dans l'intitulé n'a pas / plus grand'chose à voir avec la préoccupation réelle ;)

md-6 apporte en effet un "centrage" physique,... mais un déséquilibre visuel... :calim2:

Citation:

Envoyé par NoSmoking

...lire au moins Grid system...

+1
24/11/2021, 17h35
NoSmoking

Citation:

md-6 apporte en effet un "centrage" physique,... mais un déséquilibre visuel... :calim2:

c'est pas faux (Kaamelott) ... perso comme les <label> sont longs j'opterais pour« le tout à la ligne » mais les goûts et les couleurs ...!
09/12/2021, 15h15
Tamzoro

Merci encore à vous deux pour votre aide. 8-)

Mon problème est résolu, grâce à vous deux.