Bonjour, tout d'abord pour mieux comprendre voici ma page :
Comme vous pouvez le voir j'ai dans mon container un tableau puis en dessous, un formulaire.
ce que je souhaite faire, c'est pouvoir faire un autre formulaire à la droite du premier mais je ne maitrise pas encore parfaitement les grilles bootstrap pour réaliser ça..
Faudra surement enlever le col-md-4 de la balise <div> du haut et après tu répète tout ce qu'il y a entre la balise <article></article> et cela devrait le faire sinon tu t'embête pas et tu crée un tableau html avec <table>
Une bonne vieille façon : utiliser deux div flottants. float: left) - ne pas oublier de supprier les flottants par un <br style="clear:both">
Les jeunes préférerons un élément dont la propriété display est fixée à flex comme conteneur général.
Il y a d'autres façon : tableau (pas bien ! nous dit-on) et colonnes (qu'IE ne comprend pas) cela dit, le flex n'est pas non plus supporté par les anciennes versions de IE.
Bonjour @Lamecarlate, j'ai essayé d'utiliser la grille mais sans réussite, mon deuxieme formulaire s'ajoutant toujours en dessous du premier et non à sa droite.
Bonjour @Domi65, j'ai aussi essayé ta méthode avec les float right et left, et j'arrive au même résultat...
EDIT : J'ai réussi à faire ce que je voulais, je vous le partage si quelqu'un a besoin à l'avenir :
<div class="row">
<div class="col">
<h2>Renseigner un client</h2>
<form class="needs-validation" action="index.php" method="post" novalidate>
<label for="validationCustom01">Prénom</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="Karim" name="prenom" value="" required>
<div class="valid-feedback">
Vérifié
</div>
<label for="validationCustom02">Nom de famille</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Benzema" name="nom" value="" required>
<div class="valid-feedback">
Vérifié
</div>
<label for="validationCustom03">Téléphone</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="0612345678" name="tel" required>
<div class="invalid-feedback">
Merci de renseigner un numéro de téléphone valide.
</div>
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="@" name="email">
<small id="emailHelp" class="form-text text-muted"></small>
<label for="validationCustom05">Adresse</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="21 Avenue des champs Elysées" name="adresse" required>
<div class="invalid-feedback">
Merci de renseigner une ville.
</div>
<label for="validationCustom05">Ville</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="Angers" name="ville" required>
<div class="invalid-feedback">
Merci de renseigner une ville.
</div>
<label for="validationCustom05">Code Postal</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="49000" name="codePostal" required>
<div class="invalid-feedback">
Merci de renseigner un code postal.
</div>
<label for="validationCustom05">Adresse de l'installation</label>
<input type="text" class="form-control" placeholder="21 Avenue des champs Elysées" name="adresseInstall">
<label for="validationCustom05">Ville de l'installation</label>
<input type="text" class="form-control" placeholder="Le Mans" name="villeInstall">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Je ne suis pas un robot
</label>
<div class="invalid-feedback">
Vous devez cocher la case de vérification.
</div>
</div>
<button class="btn btn-primary" name='valider' type="submit">Valider le client</button>
</form>
</div>
<div class="col">
<h2>Renseigner un nouvel ouvrage</h2>
<form class="needs-validation" action="index.php" method="post">
<label for="validationCustom01">Ouvrage</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="Pompe à chaleur Aquarea monophasé" name="nomProduit" value="" required>
<div class="valid-feedback">
Ok
</div>
<label for="validationCustom01">Description</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="Commentaire supplémentaire" name="libelle" value="" required>
<div class="valid-feedback">
Ok
</div>
<label for="validationCustom01">Prix</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="777.45" name="prixProduit" value="" required>
<div class="valid-feedback">
Ok
</div>
<label for="validationCustom01">Famille</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="Pompes" name="prixProduit" value="" required>
<div class="valid-feedback">
Ok
</div>
</br>
<button class="btn btn-primary" name='subOuvrage' type="submit">Enregistrer l'ouvrage</button>
</form>
</div>
</div>
- Edité par anonov 15 janvier 2021 à 15:06:53
[Bootstrap] Couper ma page en deux
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)