Layout Bootstrap

Version imprimable

Layout Bootstrap

Salut ! Ça va faire + de 2h que je galère avec Bootstrap avec le layout ! Je me mélange les pinceaux dans mon code j'essaye des choses, je retourne la doc mais je capte pas super bien comment ça marche...

Mon projet est sur ReactJS mais c'est pas très important pour avoir de l'aide

Voici le code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <main className="row"> <section className="login col-4"> <h2 className="logtitle row justify-content-center">Connecte toi !</h2> <form className="col justify-content-center"> <div className="maillog col align-self-center"> <img className="mailsvg" src={mailsvg}/> <input type="text" className="logmail" placeholder="Adresse mail ou téléphone" name="LogMail"/> </div> <div className="passlog"> <img className="locksvg" src={locksvg}/> <input type="password" className="logpass" placeholder="Mot de passe" name="LogPass"/> </div> <div> <div> <input type="checkbox" className="logmemory" name="memory" checked/> <label for="memory">Se souvenir de moi</label> </div> <div> <Link className="loglost" to="#">Mot de passe oublié</Link> </div> </div> <input type="submit" className="logsubmit" value="Se connecter"/> </form> </section> <section className="register col-8"></section> </main>
Sur la première ligne, je mets en row mes 2 sections, sur l'élément parent... jusque là pas de souci, les width des 2 sections sont réglés avec un col-4 pour la partie gauche et col-8 pour la partie droite ! Ok ! Jusqu'à la c'est relativement simple et clair ! Mais c'est après que ça se complique... j'arrive à centrer le H2 en lui disant directement row et justify-content-center ! Là déjà je pige moyen car le h2 n'a pas d'élément enfant donc pourquoi le row et justify-content-center font effet sur lui directement ?? Après on rentre dans un form qui est composé de 4 éléments (3 divs et 1 input de type submit) qui doivent être en column et centré dans cette section... Bon ok.. On va mettre col au form et je veux que tous les éléments enfants de la balise form soit centrés... Ok d'après la doc faut mettre justify-content-center aussi.... Mais je suis en col donc ça marche pas ! Dans ma console ça me dit que le justify content n'est pas pris en compte car il ne s'agit pas d'un élément flex blablabla --'... donc je vais essayer avec align-items-center... marche pas non plus... Bref je vais pas expliquer tous mes essais que je fais depuis 2 - 3h mais là j'abdique ! Il parait que le CSS est plus simple avec Bootstrap haha.... Plus sérieusement je veux bien une explication ! Merci

ps:dsl les modos si je ne suis pas dans la bonne partie du fofo !

03/06/2021, 16h44
NoSmoking

Bonjour,
avec BootStrap il est toujours utile de préciser la version que l'on utilise !

Citation:

Il parait que le CSS est plus simple avec Bootstrap haha....

Comprendre BootStrap nécessite de comprendre d'abord le CSS, le HTML ne devant pas être en reste ceci pour te dire que :

Code:

<main className="row">

ne permet pas d’attribuer une class, quelque soit sa provenance, à un élément.

Fait des essais avec

Code:

<main class="row">

et on reparle éventuellement !
04/06/2021, 13h26
d3LTa7
Salut et merci de ta réponse ! Ma version de Bootstrap est la 5.0.1

Alors effectivement je pensais qu'il fallait absolument utiliser le terme className au lieu de class quand on travaille sur React ! J'ai donc essayé avec class="row" et il n'y a pas de changement... que j'utilise class ou className ne semble pas influer sur le CSS de ma page.

Par exemple :
Code:

1 2 3 4 <main class="row"> <section class="login col-4">...</section> <section class="register col-8">...</section> </main>
et
Code:

1 2 3 4 <main className="row"> <section className="login col-4">...</section> <section className="register col-8">...</section> </main>
donne le même résultat...

Citation:

... que j'utilise class ou className ne semble pas influer sur le CSS de ma page.

:oops: effectivement j'en ai occulté cette information, pourtant bien visible, tellement j'ai eu du mal à lire ta prose exempte de retour chariot.

J'en ai conclu que tu cherchais à centrer tous les éléments dans le conteneur <section>, il te faut dans ce cas utiliser à bon escient la classe text-center qui devrait être suffisante pour peu que tu supprimes tous ce qui te sert à rien soit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<section className="login col-4 text-center">  <!-- uniquement ici -->
  <h2 className="logtitle">Connecte toi !</h2>
  <form className="col">
    <div className="maillog">
      <img className="mailsvg" src="{mailsvg}/">
      <input type="text" className="logmail" placeholder="Adresse mail ou téléphone" name="LogMail">
    </div>
    <div className="passlog">
      <img className="locksvg" src="{locksvg}/">
      <input type="password" className="logpass" placeholder="Mot de passe" name="LogPass">
    </div>
    <div>
      <div>
        <input type="checkbox" className="logmemory" name="memory" checked="">
        <label for="memory">Se souvenir de moi</label>
      </div>
      <div>
        <link className="loglost" to="#">Mot de passe oublié
      </div>
    </div>
    <input type="submit" className="logsubmit" value="Se connecter">
  </form>
</section>

2 pièce(s) jointe(s)

Effectivement text-center centre bien mon H2, mais je pense qu'il me manque encore des class bootstrap dans mon code pour arriver à ce que je veux car mon <form> prend toute la largeur de la section:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   <main className="row">  
      <section class="login col-4 text-center">          
        <h2 class="logtitle">Connecte toi !</h2>
        <form class="form col align-self-center">
          <div class="maillog">
            <img className="mailsvg" src={mailsvg}/>
            <input type="text" className="logmail" placeholder="Adresse mail ou téléphone" name="LogMail"/>
          </div>
          <div className="passlog">
            <img className="locksvg" src={locksvg}/>
            <input type="password" className="logpass" placeholder="Mot de passe" name="LogPass"/>
          </div>
          <div className="checklost">
            <div className="">
              <input type="checkbox" className="logmemory" name="memory"/>
              <label for="memory">Se souvenir de moi</label>  
            </div>
            <div className="">
              <Link className="loglost" to="#">Mot de passe oublié</Link>  
            </div>              
          </div>
          <input type="submit" className="logsubmit" value="Se connecter"/>
        </form>          
      </section>

css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
main{
  font-family: 'Poppins', sans-serif;
}
.mailsvg, .locksvg{
  fill: var(--violet);
  width: 20px;
}
.form{
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around; */
}
.login{
  /* display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rem 0; */
}
.logtitle{
  color: var(--violet);
  font-weight: 700;
  margin-bottom: 8rem;
}
.maillog, .maillog>*,.passlog, .passlog>*{
  background: var(--gris);
}
.maillog, .passlog{
  height: 2.5rem;
  margin: 0.5rem 0;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  color: var(--font);
}
.checklost{
  width: 100%;
  height: 2rem;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.checklost label{
  margin-left: 0.5rem;
}
.loglost{
  font-style: italic;  
  color: var(--violet);
  text-decoration: none;
  border-bottom: var(--violet) 1px solid;
}
.logsubmit{
  background: var(--jaune);
  padding: 0.4rem 1rem;
  border: none;
  color: var(--violet);
  font-weight: 500;
  margin-top: 5rem;
}

j'ai commenté les parties layout vanilla pour que bootstrap puisse prendre le relai pour les éléments parent (main,section et form) pour le moment mais ça ne donne pas le résultat voulu :

Pièce jointe 599181

Et je cherche à faire comme ceci :

Pièce jointe 599182

Citation:

mais je pense qu'il me manque encore des class bootstrap

A priori je dirais plutôt que tu as des choses en trop dans ton CSS perso.
Code:

1 2 3 4 5 6 7 8 9 10 .maillog, .passlog{ height: 2.5rem; margin: 0.5rem 0; padding: 0 0.5rem; /* display: flex; /* out */ /* flex-direction: row; /* out */ /* align-items: center; /* out */ /* justify-content: start; /* out */ color: var(--font); }
cela devrait rétablir le centrage.

04/06/2021, 18h03
d3LTa7

1 pièce(s) jointe(s)

Ça m'a centré mes inputs mais rien de plus :(

Pièce jointe 599194

Citation:

Ça m'a centré mes inputs mais rien de plus :(

:koi: c'était pas le but !

Ceci étant, si tu utilises BootStrap pour ta mise en page, bonne chance, autant utiliser les règles qu'il fournit en ne créant que les « classes custom » qu'il ne gère pas.

Ton formulaire pourrait ressembler à :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<main className="row">
  <section className="col-4 text-center">
    <form className="border border-dark p-4">
 
      <h2 className="fw-bold mb-4">Connecte toi !</h2>
 
      <div className="input-group-text mb-4">
        <img className="mailsvg" src={mailsvg} />
        <input type="text" className="form-control border-0 bg-transparent ms-2" placeholder="Adresse mail ou téléphone" name="LogMail" />
      </div>
 
      <div className="input-group-text mb-4">
        <img className="locksvg" src={locksvg} />
        <input type="password" className="form-control border-0 bg-transparent ms-2" placeholder="Mot de passe" name="LogPass" />
      </div>
 
      <div className="d-flex justify-content-between">
        <div>
          <input type="checkbox" className="logmemory" id="memory" name="memory" checked />
          <label className="" for="memory">Se souvenir de moi</label>
        </div>
        <Link className="loglost" to="#">Mot de passe oublié</Link>
      </div>
 
      <button className="btn btn-warning btn-block my-4" type="submit">Se connecter</button>
    </form>
  </section>
</main>

Après à toi de jouer avec les padding et/ou margin : Margin and padding