Dépalcer une div à droite (BOOTSTRAP)
RésoluEritou Messages postés 110 Date d'inscription Statut Membre Dernière intervention -
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
- Mettre un bouton à droite bootstrap
- Les textes ne doivent pas être en retrait à droite et à gauche - Guide
- Barre droite mac - Forum MacOS
- Barre droite clavier - Forum Windows
- Bouton reinitialisation pc - Guide
- Diagnostic bouton photo - Accueil - Outils
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 ?
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;
