Bootstrap 4 : impossible d'aligner 2 champs de formulaires de 6 col chacune

a2line

Membre confirmé
26 Octobre 2007
16
0
Bonjour,
Voici mon code pour un formulaire, je ne parviens pas à mettre l'une à côté de l'autre les 2 champ email et tel. Si quelqu'un voit un indice...
+ Je ne parviens pas à mettre plusieurs ligne au champ textarea, alors qu'il a bien rows="5" ?
Merci beaucoup !

HTML:
<div class="container">  
                   <div class="contact animated bounceInDown img-responsive">
                       <h1>Contact</h1>
                   </div>
                   <div class="formulaire">
                       <div class="row justify-content-md-center">
                           <div class="col-sm-8 col-sm-push-2 col-xs-10 col-xs-push-1">
                               <form class="message" data-toggle="validator">
                                   <div class="form-group">
                                       <div class="col-xs-12">
                                           <input type="text" class="form-control" placeholder="Nom" aria-label="Nom" aria-describedby="basic-addon1">
                                       </div>
                                       <div class="col-xs-12">
                                           <input type="text" class="form-control" placeholder="Prénom" aria-label="Prénom" aria-describedby="basic-addon2">
                                       </div>
                                       <div class="form-group">
                                           <div class="col-sm-6 col-xs-12">
                                               <div class="input-group mb-3">
                                                   <div class="input-group-prepend">
                                                       <span class="input-group-text" id="basic-addon3">@</span>
                                                   </div>
                                                   <input type="email" class="form-control" placeholder="Email" aria-label="Username" aria-describedby="basic-addon3">
                                               </div>
                                           </div>
                                           <div class="col-sm-6 col-xs-12">
                                               <input type="tel" class="form-control tel" placeholder="Tel." aria-label="Telephone" aria-describedby="basic-addon4">
                                           </div>
                                       </div>
                                       <div class="col-xs-12">
                                           <input type="text" class="form-control" placeholder="Sujet" aria-label="Sujet" aria-describedby="basic-addon5">
                                       </div>
                                       <div class="col-xs-12">
                                           <textarea id="message" class="form-control" name="message" rows="5" placeholder="Message"></textarea>          
                                       </div>
                                       <button type="submit" class="btn btn-primary envoyer">Envoyer</button>
                                   </div>
                               </form>
                           </div>
                       </div>
                   </div>                            
               </div>
 

Fichiers joints

  • Capture d’écran 2018-07-03 à 19.43.05.webp
    Capture d’écran 2018-07-03 à 19.43.05.webp
    16,2 KB · Affichages: 346
Bonjour,
Pourquoi un form-group dans un form-group ? J'aurais plutôt fait ainsi en encadrant ta ligne par un "col-xs-12", deux colonnes dans une colonne :
Bloc de code:
<div class="col-xs-12">
  <div class="col-sm-6 col-xs-12">
     <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3">@</span>
      </div>
      <input type="email" class="form-control" placeholder="Email" aria-label="Username" aria-describedby="basic-addon3">
    </div>
  </div>
  <div class="col-sm-6 col-xs-12">
    <input type="tel" class="form-control tel" placeholder="Tel." aria-label="Telephone" aria-describedby="basic-addon4">
  </div>
</div>
 
Bonjour, merci, effectivement, simplement mettre une classe row à la place de form-group, c'est réglé !
Merci :)