[Résolu] Impossible d'aligner 2 champs de formulaires de 6 col chacune

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 !

<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>

Modifié par A2L (03 Jul 2018 - 19:58)

Pour moi cela surviens car la class row de bootstrap n'est pas utiliser a chaque nouvelle ligne

Effectivement, un col va toujours dans un row (même si tu n'es pas obligée de mettre un row par ligne => les col retourneront à la ligne automatiquement si pas assez de place).
Aussi, depuis Bootstrap4, col-xs-* n'existe plus et est remplacé par col-*
Voilà quelques changements dans ta structure

Bonjour et merci !
Effectivement, 2 x 6 col ça devait tenir, j'avais rajouté des row à chaque lg, sans succès, enlevé les xs mais rien ne changeait, cool merci beaucoup, enfin c'est bien rangé !!
Et une idée pourquoi mon texarea n'occupe pas 5 lignes malgré rows="5" ??

Merciii

"Mauvaise réponse"
Modifié par Tryno (04 Jul 2018 - 10:18)

Dans le codepen, il m'affiche bien 5 lignes. Est-ce que tu n'as pas d'autres class chez toi qui modifient la hauteur ?

Edit:
@Tryno : "rows" est bien un attribut destiné a donner une hauteur de x lignes pour un textarea
Modifié par Yordi (04 Jul 2018 - 10:18)

@Yordi : Je me suis rendu compte de ma connerie x)

En y réfléchissant ça ne serait pas le la div qui "bloque" les lignes, ce que je veux dire c'est que les lignes sont bien aux nombre de 5 mais pas afficher comme un gros blocs ?

Effectivement Yordi, je continue à chercher pourquoi je n'en ai pas 5... je confirmerai quand ou si je trouve..!
Merci !

J'ai rafraîchi, réouvert, c'est ok pour les 5 lignes !
Merci beaucoup
Modifié par A2L (04 Jul 2018 - 10:42)