5569 sujets

Sémantique web et HTML

Empiler trois colonnes Bootstrap

Bonjour,
J'ai 3 colonnes horizontales (me semble-t-il car je ne connais rien à BOOTSTRAP Smiley decu ) que je souhaiterais "empiler"; c'est à dire le titre en haut, le texte au centre puis en dernier le formulaire. Quelques explications ne seraient pas de refus en espérant que ça rentre (enfin)un peu Smiley murf
Voici le HTML :
    <body >
            <div class="row">
						<div id="bouton_close"><input type="image" id="image" class="image" src="images/close.gif" onClick="parent.close()">

<div class="col-md-6 ms-auto" 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>
                </div>

	</body>

Merci beaucoup.
Bonne journée Smiley cligne
Administrateur
Hello !

Je n'utilise pas non plus les grilles / positionnements de Bootstrap, mais je ne peux pas m'empêcher d'intervenir parce que ta remarque me turlupine : pourquoi utilises-tu Bootstrap si tu ne connais pas ce framework ?

Pour afficher correctement les éléments, on a globalement deux moyens :
- CSS natif (avec les positionnements tels que Flexbox, Grid Layout, position, etc.)
- Un framework tel que Bootstrap, Tailwind, etc. (qui au final vont également appliquer du CSS natif, mais qui servent d'interface).

Le framework a pour objectif de te faciliter la vie pour éviter d'écrire du CSS natif pour les personnes qui sont pressées ou n'ont pas envie d'apprendre CSS.

Dans ton cas ça semble être contradictoire : tu utilises un framework… que tu ne connais / maîtrise pas.
Est-ce une contrainte que tu n'as pas choisie ? Sinon, pourquoi s'encombrer d'une surcouche et ne pas le faire en CSS natif ?
Bonjour Raphael,
Je n'ai jamais réussi à faire un formulaire (à cause de ce qui va avec : js et php) Smiley murf
Je suis là tombé sur, non pas un tuto mais des fichiers tout fait (reste la contruction); mais effectivement je n'aime pas non plus et préfère le natif (avec l'aide d'Alsa Smiley cligne . Mais encore une fois, c'est en dehors de mes maigres compétences.
Ta question met donc le doigt où ça fait mal Smiley biggrin
Merci et bonne journée Smiley cligne
Administrateur
OK, je comprends ton explication.

Je tente une réponse à l'aveugle (puisque je n'ai pas de projet BS pour tester ta page) mais je dirais que c'est la partie `col-md-6` qui crée une grille de 6 colonnes dans le code `<div class="col-md-6 ms-auto" id="form_container">`.

Sur le principe, supprimer le `col-md-6` devrait supprimer les colonnes, donc tout afficher rangée par rangée.
Modifié par Raphael (20 Sep 2024 - 12:40)
Prévenir un modérateur
Répondre au sujet
Aller à