Dépalcer une div à droite (BOOTSTRAP)

Résolu/Fermé
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 10 nov. 2022 à 15:17
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 - 24 nov. 2022 à 12:46

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

diablo13800 Messages postés 2890 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 16 février 2024 1 844
10 nov. 2022 à 15:27

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.


0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
10 nov. 2022 à 16:35

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.

0
diablo13800 Messages postés 2890 Date d'inscription jeudi 2 juillet 2015 Statut Membre Dernière intervention 16 février 2024 1 844
10 nov. 2022 à 16:49

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 ?


0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
10 nov. 2022 à 19:47

Voici le lien :

https://lecomptearebours.fr/contact/formpage.html

Merci beaucoup :)

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 nov. 2022 à 20:03

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;

0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
10 nov. 2022 à 21:57

Bonsoir jordane45,

Cela ne fait que centrer le formulaire :/

Merci.

0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
10 nov. 2022 à 22:20

Et ben si tu veux le mettre plus à droite tu augmentes l'offset

2
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
11 nov. 2022 à 09:36

Tout bêtement :)

Merci beaucoup jordane45.

Je m'en vais me renseigner sur l'offset.

Bon week-end.

0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
17 nov. 2022 à 13:31

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.

0
Eritou Messages postés 111 Date d'inscription samedi 20 décembre 2014 Statut Membre Dernière intervention 29 septembre 2023 4
24 nov. 2022 à 12:46

Bonjour,

Avec ce code ci, ça fonctionne :

<div class="col-md-6 ms-auto" id="form_container">

Bonne journée.

0