Dépalcer une div à droite (BOOTSTRAP)
RésoluEritou Messages postés 120 Statut Membre -
Bonjour,
Je n'y connais rien en BOOTSTRAP.
J'ai un formulaire qui se trouve à gauche et que j'aimerais déplacer à droite. J'ai "joué" avec les CSS sans succès. :(
Le problème doit venir du HTML, mais encore une fois Bootstrap et moi, ça fait 2 (le formulaire provient d'un template).
Je vous donne le HTML :
<div id="bouton_close"><input type="image" id="image" class="image" src="images/close.gif" onClick="parent.close()">
<div class="row">
<div class="col-md-6 " id="form_container">
<h2>Contact Us</h2>
<p> Please send your message below. We will get back to you at the earliest! </p>
<form role="form" method="post" id="reused_form">
<div class="row">
<div class="col-sm-12 form-group">
<label for="message"> Message:</label>
<textarea class="form-control" type="textarea" id="message" name="message" maxlength="6000" rows="7"></textarea>
</div>
</div>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Your Name:</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="col-sm-6 form-group">
<label for="email"> Email:</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
</div>
<div class="row">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="submit" class="btn btn-dark" >Send</button>
</div>
</div>
</form>
<div id="success_message" style="width:100%; height:100%; display:none; "> <h3>Posted your message successfully!</h3> </div>
<div id="error_message" style="width:100%; height:100%; display:none; "> <h3>Error</h3> Sorry there was an error sending your form. </div>
</div>
</div>
Merci :)
Macintosh / Firefox 106.0
9 réponses
-
Bonjour,
Pour moi le problème vient de cette ligne :
<div class="col-md-6 " id="form_container">
Cette ligne sépare votre page en 2 colonnes, sans pour autant le séparer.
Essayer avec cette ligne juste avant :
<div class="col-md-3 " ></div>Ou avec cette ligne :
<div class="col-md-6 col-md-offset-3" id="form_container">Cette dernière permet de décaler votre colonne de 3 unités à droite.
-
Bonjour diablo13800,
Merci pour votre réponse, malheureusement cela ne fonctionne pas. La div est soit (presque) centrée, soit décalée vers la droite mais avec un width divisé par 3 (?), sûrement du aux columns.
Mais oui, à mon avis tout se joue dans cette ligne.
Merci.
-
Avec les lignes que je vous ai envoyé les md-6 deviennent centré
Cependant, elle deviennent centré par rapport au container qui le précède, qui eux ont une taille dépendant des container qui'ls ont etc...
Pouvez-vous envoyer toute votre page ?
-
Voici le lien :
https://lecomptearebours.fr/contact/formpage.html
Merci beaucoup :)
-
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Bonjour,
Il faut utiliser :
<div class="col-md-6 offset-md-3"
*Tu dois aussi supprimer, dans ton css,, sur le #form_container , les attributs suivants
width: 40%; float: right;
-
Bonsoir jordane45,
Cela ne fait que centrer le formulaire :/
Merci.
-
Tout bêtement :)
Merci beaucoup jordane45.
Je m'en vais me renseigner sur l'offset.
Bon week-end.
-
Bonjour jordane45,
Selon la taille de la fenêtre, la div est à right: -60px (une partie de la div cachée), ou ne reste pas à droite mais à left:0 quand on diminue davantage la fenêtre.
Rien du côté des CSS :(
Bootstrap ?
Bonne journée.
-
Bonjour,
Avec ce code ci, ça fonctionne :
<div class="col-md-6 ms-auto" id="form_container">
Bonne journée.
